After reading Michelle Barker's article this week
I think I should write a bit about
because among all the shadows in CSS,
drop-shadow is the most special one.
In CSS, multiple values of a property are usually separated with commas, such as
But there isn't any seperator between each
The key difference
It's similar to
box-shadow if there's only one
Then add another one. You may think there'll be 2 shadows but it's not. The total number of shadows becomes 3.
Add four drop shadows and there are now 2^4 - 1 = 15 shadows.
As you can see, multiple drop shadows grow exponentially.
There would be more than 1000 shadows by only given
That's because each
drop-shadow takes the previous output as input,
which is quite different from
A secret weapon
CSS relies on existing DOM structure in the browser.
It's not possible to generate new elements other than
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.
box-shadow we can do a lot more.
I have used it in many of my previous works.
Let's create something which utilizes
You can ignore the css-doodle syntax here.
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.
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!