csscss-filters

How to make multiple DROP-shadow?

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

  • 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>