How to make multiple DROP-shadow?

css css-filters
VeloFX picture VeloFX · Jan 21, 2016 · Viewed 12.8k times · Source

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

Answer

Oriol picture Oriol · Jan 21, 2016

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>

Related questions

How to apply a CSS filter to a background image

I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts: background-image: url("whatever.jpg"); I want to apply a CSS 3 …

Read More
How can I make a CSS glass/blur effect work for an overlay?

I am having trouble applying a blur effect on a semi-transparent overlay div. I'd like everything behind the div the be blurred, like this: Here is a jsfiddle which doesn't work: http://jsfiddle.net/u2y2091z/ Any ideas how …

Read More
CSS filter: make color image with transparency white

I have a colored png image with transparency. I would like to use css filter to make the whole image white but leave the transparency as it is. Is that possible in CSS?

Read More