CODEWITHSUNDEEP
csscolorsgradientlinear-gradients
JMcFar
JMcFar

Reputation: 301

CSS Gradients Inside Gradients

Is it possible to use a gradient as one of the colors inside a gradient?

For my specific purpose I have an initial gradient from left to right:

linear-gradient(to right, red, darkgray);

but I'd like the darkgray part to actually be a gradient from top to bottom:

linear-gradient(to bottom, darkgray, white);

I tried the code I would expect to work:

linear-gradient(to right, red, linear-gradient(to bottom, darkgray, white));

But this doesn't seem to work, and I haven't seen anyone write about the possibility of gradients within gradients.

EDIT: it's not possible [CSS gradients are images and cannot be used as the colors within other gradients], but @hungerstar has a good workaround below: layer a gradient with transparencies over another gradient.

Upvotes: 5

Views: 5310

Answers (2)

hungerstar
hungerstar

Reputation: 21725

Gradients inside of a gradient is not possible.

With that said, give this a look. Since the gradients are layered on you would have to set some transparency to your colors with rgba() to allow the gradient from behind to show through the gradient from above.

Maybe something like this?

body {
  margin: 0;
  height: 100vh;
  background:
    linear-gradient( to right, rgba(255, 0, 0, 0.5), rgba( 169, 169, 169, 0.5 ) ),
    linear-gradient( to bottom, darkgray, white );
}

Upvotes: 7

Axnyff
Axnyff

Reputation: 9964

No, that's not possible.

The syntax for a gradient is:

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

And linear-gradient doesn't create a color, it creates an image.

Upvotes: 2

Related Questions