Home

Multiple drop shadows

08 August 2020

After reading Michelle Barker's article this week I think I should write a bit about drop-shadow too, because among all the shadows in CSS, drop-shadow is the most special one.

element {
  filter: drop-shadow(0 0 0 #000);
}

In CSS, multiple values of a property are usually separated with commas, such as background-image, box-shadow etc. But there isn't any seperator between each drop-shadow through filter property.

element {
  filter:
    drop-shadow(0 0 0 #000)
    drop-shadow(0 0 0 #000);
}

The key difference

It's similar to box-shadow if there's only one drop-shadow.

.box {
  width: 20px; height: 20px;
  background: #000;

  filter: drop-shadow(20px 20px 0 #666);
}

Then add another one. You may think there'll be 2 shadows but it's not. The total number of shadows becomes 3.

.box {
  filter:
    drop-shadow(20px 20px 0 #666)
    drop-shadow(40px 0 0 #666);
}

Add four drop shadows and there are now 2^4 - 1 = 15 shadows.

.box {
  filter:
    drop-shadow(20px 20px 0 #666)
    drop-shadow(40px 0 0 #666)
    drop-shadow(80px 0 0 #999)
    drop-shadow(160px 0 0 #ccc);
}

As you can see, multiple drop shadows grow exponentially. There would be more than 1000 shadows by only given 10 drop-shadow functions.

That's because each drop-shadow takes the previous output as input, which is quite different from text-shadow and box-shadow.

A secret weapon

CSS relies on existing DOM structure in the browser. It's not possible to generate new elements other than ::before and ::after. Sometimes I really wish CSS had the ability to do so straightforwardly.

However, we can partially make up for this by creating various shadows and gradients entirely in CSS.

That's why having drop-shadow is so exciting. Together with text-shadow and box-shadow we can do a lot more. I have used it in many of my previous works.

Example

Let's create something which utilizes drop-shadow.

See the Pen 8c5d951df41038a6ed96c32d63bcafc2 by yuanchuan (@yuanchuan) on CodePen.

You can ignore the css-doodle syntax here. The drop-shadow is for generating more branches. Toggle the filter property to see how it behaves.

And now you probably know how to create something like the following picture, by abusing multiple drop shadows with blur values. It'll be slow to render of course.

Warning

Applying multiple drop shadows on your web page can cause performance issues, so be careful not to crash your browser :)

Hope you find it helpful!