How to apply multiple css radial gradients to a single element

Question

I have the following style applied to my div element:

background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);

This has the desired effect (being an inner drop shadow only at the top of the div). I would like to apply the same effect at the bottom of the div. The following line does it well, but it seems to override the first, so I can only get one or the other.

background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);

Can someone show me how I can have multiple radial gradient backgrounds per element? I notice that webkit can do this easily, but I'm looking for a cross browser implementation/alternative.

Thanks

score 6 · Answer 1 · answered Aug 13 '18 at 11:06

The best way to do that is to list them in the background property. But keep in mind that the order of properties is extremely important.

background:
    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

background then -size and -repeat, otherwise it won't work. It took me something like 30 mins to get it. Hope it will be helpful for someone.

The `background` property is shorthand for: `background-color`, `background-image`, `background-position`, `background-size` `background-repeat`, `background-origin`, `background-clip`, `background-attachment` That's why in your example you had to put `background-size` and `background-repeat` after `background` as to override the shorthand `background`. If you use `background-image` instead of `background`, the order won't matter. — Mirha Masala, Jun 30 '21 at 14:21

score 5 · Accepted Answer · edited Oct 13 '14 at 00:03

5

Just sepereate each one with a comma.

Something like this :

background-image: url(),url(), url();

Ofcourse instead of url you can put gradient.

And all modern browsers support this feature ( meaning IE does not).

In order to make it available in IE, you can use pie.htc

edited Oct 13 '14 at 00:03

aug

11,138
9
72
93

answered May 20 '12 at 21:41

eric.itzhak

15,752
26
89
142

Thanks Eric, thats exactly what I needed. cheers. Although pie.htc doesn't support radial gradients, it is a nice piece of work. – hofnarwillie May 20 '12 at 21:46

Ana · Answer 3 · 2023-05-17T06:09:50.780

5

You just list them one after the other - like this:

html {
  height: 100%;
  background: 
    radial-gradient(closest-corner at 50% -10%, 
            rgba(5, 5, 5, .7), 
            transparent), 
    radial-gradient(closest-corner at 50% 110%, 
            rgba(5, 5, 5, .7), 
            transparent);
}

edited May 17 '23 at 06:09

answered May 20 '12 at 21:49

Ana

35,599
6
80
131

The link is broken. Could you make a Codepen? – Frank Conijn - Support Ukraine May 16 '23 at 03:02
1

Made it into a little snippet here. – Ana May 17 '23 at 06:04

score 3 · Answer 4 · answered Aug 30 '13 at 11:20

3

You have to set the value of the radial gradient to transparent in order to let the other background come through:

   background-image: radial-gradient(closest-corner at 40% 70%,#FFFFFF 0%, rgb(171,171,171),50%,transparent),
                     radial-gradient(closest-corner circle at 80% 20%, #FFFFFF 0%, rgb(171,171,171),20%,transparent),
                     radial-gradient(closest-corner circle at 10% 10%, #FFFFFF 0%,rgb(171,171,171) 25%);

answered Aug 30 '13 at 11:20

wattry

936
10
22

2

thank you, but I already do by use of the `rgba` value instead of just `rgb`. The `a` part is the alpha and is set to 0. The answer above was what I was looking for (i.e. separating them by a comma instead of multiple css entries) – hofnarwillie Sep 02 '13 at 14:59

How to apply multiple css radial gradients to a single element

4 Answers4

Linked

Related