CODEWITHSUNDEEP
csscss-gradients
Ninja420
Ninja420

Reputation: 3872

Generating a css gradient with single color

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 ?

Upvotes: 8

Views: 3229

Answers (5)

Temani Afif
Temani Afif

Reputation: 272590

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

Upvotes: 13

Fitzi
Fitzi

Reputation: 1673

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

Upvotes: 0

Dickens A S
Dickens A S

Reputation: 4054

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%);

Upvotes: 1

Max Donchenko
Max Donchenko

Reputation: 159

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>

Upvotes: 1

AlainIb
AlainIb

Reputation: 4708

yes you can by use "transparent" as a color

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

Upvotes: 3

Related Questions