🐞 Radial Gradient settings are not applied to Backgrounds on Responsive modes both in the Editor and in the Frontend

[319heads]

Prerequisites

• [X] I have searched for similar issues in open and closed tickets and cannot find a duplicate.
• [X] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

When you set locations and angle for each breakpoint to ensure the gradient adapts to different screen sizes, these settings have no effect at all for radial gradients, making them unresponsive.

For linear gradients the location settings are also completely ignored unless you also change the angle at the same time - but even then it is very buggy: If you set the tablet breakpoint angle and locations those settings then override desktop settings and if you set the mobile breakpoint angle and locations those settings then override the tablet settings.

https://github.com/elementor/elementor/assets/1848048/504efdb3-ecdd-454a-8d15-20277f3e40a3

Steps to reproduce

1. Set a gradient background style on a container.
2. Use the color location sliders to adjust the gradient for different breakpoints.
3. Witness how the values are ignored and have no affect at each breakpoint.

Expected behavior

When you set the background's gradient locations and angle for each breakpoint these values should be used to ensure the gradient adapts to different screen sizes.

Isolating the problem

• [X] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
• [X] This bug happens with the Hello Elementor theme active.
• [X] I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

Click to reveal

					
== Server Environment ==
	Operating System: Linux
	Software: Apache/2.4.58 (Debian)
	MySQL version: mariadb.org binary distribution v10.4.20
	PHP Version: 8.1.27
	PHP Memory Limit: 1024M
	PHP Max Input Vars: 2500
	PHP Max Post Size: 300M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.4.3
	Site URL: https://wordpress-473890-3949531.cloudwaysapps.com
	Home URL: https://wordpress-473890-3949531.cloudwaysapps.com
	WP Multisite: No
	Max Upload Size: 300 MB
	Memory limit: 40M
	Max Memory limit: 1024M
	Permalink Structure: /%postname%/
	Language: en-US
	Timezone: 0
	Debug Mode: Inactive

== Theme ==
	Name: Hello Elementor
	Version: 3.0.1
	Author: Elementor Team
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: en_US
	User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Safari/605.1.15

== Active Plugins ==
	Elementor
		Version: 3.19.1
		Author: Elementor.com

	Elementor Pro
		Version: 3.19.1
		Author: Elementor.com


== Features ==
	Custom Fonts: 0
	Custom Icons: 0

== Integrations ==
	


== Elementor Experiments ==
	Improved Asset Loading: Active by default
	Improved CSS Loading: Active by default
	Inline Font Icons: Inactive by default
	Additional Custom Breakpoints: Active by default
	admin_menu_rearrangement: Inactive by default
	Flexbox Container: Active
	Upgrade Swiper Library: Active by default
	Grid Container: Inactive by default
	Default to New Theme Builder: Active by default
	Hello Theme Header & Footer: Active by default
	Editor Top Bar: Inactive by default
	Optimized Gutenberg Loading: Active by default
	Build with AI: Active by default
	Landing Pages: Active by default
	Nested Elements: Active
	Lazy Load Background Images: Inactive by default
	Optimize Image Loading: Active by default
	Global Style Guide: Active by default
	Page Transitions: Active by default
	Notes: Active by default
	Display Conditions: Inactive by default
	Form Submissions: Active by default
	Scroll Snap: Active by default
	Menu: Active
	Taxonomy Filter: Inactive by default


== Log ==
	
PHP: showing 2 of 2PHP: 2023-10-04 16:28:02 [notice X 1][../wp-content/plugins/elementor/core/upgrade/manager.php::70] version_compare(): Passing null to parameter #1 ($version1) of type string is deprecated [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-10-04 16:31:06 [notice X 8][../wp-content/plugins/elementor/includes/base/controls-stack.php::228] hexdec(): Passing null to parameter #1 ($hex_string) of type string is deprecated [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]

Log: showing 12 of 122024-02-05 14:55:33 [info] elementor::elementor_updater Started 
2024-02-05 14:55:33 [info] Elementor/Upgrades - _on_each_version Start  
2024-02-05 14:55:33 [info] Elementor/Upgrades - _on_each_version Finished 
2024-02-05 14:55:33 [info] Elementor/Upgrades - _v_3_17_0_site_settings_updates Start  
2024-02-05 14:55:33 [info] Elementor/Upgrades - _v_3_17_0_site_settings_updates Finished 
2024-02-05 14:55:33 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.16.4',
  'to' => '3.19.1',
)]
2024-02-05 14:55:33 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.16.4',
  'to' => '3.19.1',
)]
2024-02-05 15:18:54 [info] elementor-pro::elementor_pro_updater Started 
2024-02-05 15:18:54 [info] Elementor Pro/Upgrades - _on_each_version Start  
2024-02-05 15:18:54 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2024-02-05 15:18:54 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.16.2',
  'to' => '3.19.1',
)]
2024-02-05 15:18:54 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.16.2',
  'to' => '3.19.1',
)]



== Elementor - Compatibility Tag ==
	
	Elementor Pro: Compatible

== Elementor Pro - Compatibility Tag ==

Agreement

• [X] I agree that my issue may be closed without action if it doesn't meet all the requirements.

[nicholaszein]

Hello @319heads!

Thank you for submitting your issue! 🙏

I can confirm setting up radial gradients for responsive screens results in no changes when visualized both in the Editor and on the frontend.

However, for linear gradients that's the expected behavior. As the Disclaimer explains, you must also define an angle for the gradient on responsive modes to take effect because of how CSS works for background gradients. It won't inherit the value from the desktop version. Once you give it a value, it should change as expected.

As for the radial gradient, we can’t say exactly when it'll be sorted out, but we kindly ask for your patience. Thanks for understanding! 😉

Best regards

[rami-elementor]

@319heads Thank you for reporting this issue. It was fixed in v3.20.1