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 */
     )
} 

Answer 2

yes you can by use "transparent" as a color

background: linear-gradient(transparent, #9198e5);

Answer 3

You can use RGBA

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.3) 100%);

0.3 will dim the color

If you want to add stop points at 0%, 30%, 100% with three different brightness

background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.4) 30%, rgba(2,0,36,1) 100%);

Answer 4

You can use alpha channel for this purpose. Consider color "#428383":

div {
  background-color: #428383; /* for browsers without gradient support */
  background: linear-gradient(#42838344, #428383ff);
  width: 100px;
  height: 100px;
}

<div></div>

Answer 5

If you want to vary brightness or saturation of a single color, you may be better of using hsl() instead of hex or rgb values:

.gradient {
  width: 200px;
  height: 100px;
  background: linear-gradient(hsl(193,82%,56%), hsl(193,82%,26%));
}

<div class="gradient"></div>

HSL stands for Hue, Saturation and lightness or luminance and is just another way of describing a color. This way you can easily alter saturation and brightness without actually altering the colors hue. Read more here: https://en.wikipedia.org/wiki/HSL_and_HSV