this post was submitted on 26 Nov 2025
9 points (100.0% liked)

CSS

667 readers
2 users here now

founded 2 years ago
MODERATORS
 

The background:

Some CSS properties such as background-image, text-shadow etc... take multiple values. But if my understanding is correct, the multiple values must come from the same statement. Is there any way to make it such as eg.: a CSS class appends a value to a property that already has a value?

/* CSS */

div.gradient1 {
	background: linear-gradient(60deg, red 0%, orange 50%, red 100%);
}

div.gradient2 {
	background: radial-gradient(at center, blue 10%, teal 50%, transparent 50%);
}

This fails (applies only one of the two gradients):

<div class="gradient1 gradient2"> ... 

Can I modify gradient2 somehow to make it happen? Or is something like this not supported in CSS?

div.gradient2 {
	background: currentBackground, radial-gradient(at center, blue 10%, teal 50%, transparent 50%);
}

you are viewing a single comment's thread
view the rest of the comments
[–] Cawifre@lemmy.world 1 points 1 month ago (2 children)

There are more granular properties that make up the composite background sugar. You can use background-color, for example. Can you make it work piecemeal?

[–] veniasilente@lemmy.dbzer0.com 1 points 1 month ago

The corresponding property would be background-image (background-color does not seem to pick gradients, at least, as they are not color declarations) but the core problem is the same: there doesn't seem to be a mechanism refer to precomputed values of those properties.

[–] Aquila@sh.itjust.works 1 points 1 month ago

This. The styles should cascade