On my project, users have the possibility to select an accent color for their profile page (var(--color-main)). Is there a possibility to create a gradient background using only that main color, for example by using the main color a % applied to this color to make it darker (or lighter) and use this as second color to make the gradient. Is that possible?

.TabsHeader-module--wrapper--BMiDm .TabsHeader-module--bgBlock--qXkLH {
background-color: var(--color-main);
border-radius: 0 0 20rem 0;
height: 21.6rem;
position: absolute;
top: 0;
width: 100%;
}

CodePudding user response：

This is an example with two custom properties defined:

• --color is your main color
• --alpha is the opacity quota (0-1) applied to --color for having the second gradient color

The background-image style attribute is set using a gradient shading from --color to --color(alpha)

That was made possible with rgba to define colors MDN

:root {
  --color: 240, 0, 0;
  --alpha: .5;
}

.gradient{

  background-image:
    linear-gradient(
      to right,
      rgba(var(--color), 1),
      rgba(var(--color), var(--alpha))
    );

  width: 100%;
  height: 200px;
  text-align: center;
}

<div ></div>

CodePudding user response：

I have found that you can use variable colors with opacity control only if you give the value as RGB decimals, which are 3 numbers (e.g. 240, 240, 240). And later you can give it a 4th value, which will control the opacity of the color (i.e. will make it darker or lighter). Here is an example:

:root {
 --color: 190,190,190;
}

div {
  background: linear-gradient(to right, rgba(var(--color), 0.8), rgba(var(--color), 0.3));
}

Thanks to Thankful Teira from codegrepper.com