Thanks to visit codestin.com
Credit goes to programming.dev

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@lemmy.world
    2·
    1 month 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·
      1 month 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·
        1 month 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, …)