Gradient backgrounds should be set with `background-image` instead of `background`

[justintadlock]

I have been attempting some work with background-clip: text like so:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 
-moz-background-clip: text;
-moz-text-fill-color: transparent;

To create a gradient effect on text like this:

However, this does not work when using either gradient presets or a custom gradient. Both use background: $gradient instead of background-image: $gradient in the CSS output. By changing those to use background-image, the effect works.

I'm not sure if there are any historical reasons for going with background, but I'd love to see us move to only targeting background-image.

[Azragh]

Agreed. background: affects

background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size

IMHO it's bad practice to use shorthand properties in inline styles alltogether.

[pbearne]

Hi all

I have started this but it seems that that change the background to background-color(or backgroundColor in js) if it is a straight color and to background-image(backgroundImage) if gradient

this change is in 100's of files so I what to reach back to make sure that me removing all the shorthand background is what you need/want

note: the only shorthand background have left is background: none

here is the branch I have started https://github.com/pbearne/gutenberg/tree/%2332787_replace_background_css_with_background-(type)

[skorasaurus]

PR for this is also at #35036

[bph]

@ajlende Is this is something you could take on... ?

[devanshijoshi9]

Hi @ajlende 👋 I have raised a new PR for this enhancement as some other components also have gradient background. Could you please review and let me know if any further modification is required? Thank you.

PR - #57246