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%);
}
  • Cawifre@lemmy.world
    1·
    18 days 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?

    • Venia Silente@lemmy.dbzer0.comOPEnglish
      1·
      17 days 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.

  • pinchy@lemmy.world
    2·
    18 days 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.

    • Venia Silente@lemmy.dbzer0.comOPEnglish
      1·
      17 days 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(....

      • pinchy@lemmy.world
        2·
        16 days 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, …)