How to append a value to a property that takes multiple values?

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%);
}

pinchy 2 points a year ago

You can compose layering backgrounds in the way you described by using using custom properties:

@property --gradient-1 {
  syntax: "<image> | none";
  inherits: false;
  initial-value: none;
}

@property --gradient-2 {
  syntax: "<image> | none";
  inherits: false;
  initial-value: none;
}

.gradient-1, .gradient-2 {
  background-image: var(--gradient-2), var(--gradient-1);
}

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

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

Using the @property syntax with ’inherits: false‘ prevents that the parents value for this property get inherited, so that arbitrary nesting is possible.

save

path: 0 20710776, hotness: undefined, score: 2, children: 3

veniasilente 1 point a year ago

Thanks! Works like a charm. Didn't even know that inherits: false was an option.

Do you happen to know if there is any proposal to make it more native? For example with a syntax like background-image: +, radial-gradient(....

save

path: 0 20710776 20722114, hotness: undefined, score: 1, children: 2

pinchy 2 points a year ago

There is no such proposal I’m aware of. @function will enable a finite combination in a more convenient way and maybe the ident() function can help building comma separated values in new ways. In general using classes for this is tricky though because the position of each value in the list matters (if you want something like layer-1 = gradient-blue, layer-2 = gradient-red, …). Each class would need to represent a tuple (index, image) so you would need every permutation ( layer-1-gradient-blue, layer-2-gradient-blue, …)

save

path: 0 20710776 20722114 20735273, hotness: undefined, score: 2, children: 0

pinchy -1 points a year ago

save

path: 0 20710776 20722114 20735276, hotness: undefined, score: -1, children: 0

Cawifre 1 point a year ago

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?

save

path: 0 20707702, hotness: undefined, score: 1, children: 2

veniasilente 1 point a year 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.

save

path: 0 20707702 20722055, hotness: undefined, score: 1, children: 0

Aquila 1 point a year ago

This. The styles should cascade

save

path: 0 20707702 20707764, hotness: undefined, score: 1, children: 0