How to make multiple DROP-shadow?

Question

i want make two shadows with dropshadow for the div backgroundimage. This wont work:

-webkit-filter:drop-shadow(3px 3px 5px #000000, 2px 2px 2px #ffcc00);
filter:drop-shadow(3px 3px 5px #000000, 2px 2px 2px #ffcc00);

Alvord

Answer 1

The filter property accepts multiple filters, so you can repeat drop-shadow:

filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);

.gray {
  -webkit-filter: drop-shadow(3px 3px 5px #000000);
  filter: drop-shadow(3px 3px 5px #000000);
}
.yellow {
  -webkit-filter: drop-shadow(2px 2px 2px #ffcc00);
  filter: drop-shadow(2px 2px 2px #ffcc00);
}
.gray-yellow {
  -webkit-filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);
  filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);
}

<span class="gray">Hello world</span>
+ <span class="yellow">Hello world</span>
= <span class="gray-yellow">Hello world</span>

Harlandharle

Must be really subtle because it's doing nothing in Chrome – Knapweed

-webkit-filter @Knapweed – Scotopia

@Knapweed Chrome needs a vendor prefix. I have included it in the snippet. – Harlandharle

But you have to switch the first drop-shadow with the second, because the smaller one has to be at the frist place! – Alvord

be careful, 2nd shadow is applied on first as you can see on the example: codepen.io/yukulele/pen/MrNJja – Dowry

There is no need for -webkit- prefix for a long time already. Check CanIUse. It works everywhere that matter for a vast majority of us. The difference is definitely subtle though. – Audieaudience

I can confirm this works fine in 2021 in chrome – Forsythe

Answer 2

Separate each filter by a space between them:

filter: drop-shadow(0px 0px 8px #7f6400 ) drop-shadow(0px 0px 8px #7f6400 )

Yahairayahata