Generating a css gradient with single color

Question

I am trying to generate a gradient using one single color and then varying the brightness or some other related variable.

Is it possible to do so ?

Answer 1

Use a back/white layer on the top of your single color as a gradient

html {
  background:
    linear-gradient(90deg,rgb(255 255 255/50%),rgb(0 0 0/50%)),
    red; /* here is your single color */
}

Another idea is to use color-mix() to create different shades from the same color

html {
  --c: red; /* the main color */

  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--c), #fff 30%), /* we mix with white for brighter */
      color-mix(in srgb,var(--c), #000 30%)  /* we mix with black for darker */
     )
}