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
    link
    fedilink
    arrow-up
    1
    ·
    2 months 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.comOP
      link
      fedilink
      English
      arrow-up
      1
      ·
      2 months 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.