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.
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.
The key difference
It's similar to box-shadow
if there's only one drop-shadow
.
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
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.
Yet, 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.
彩林 #CSS art pic.twitter.com/KLWizBcFHV
— yuanchuan (@yuanchuan23) November 21, 2019
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!