
Better Box Shadows (CSS) - bradley_taunt
https://uglyduck.ca/better-box-shadows/
======
gkoberger
A few people have mentioned that it seems the author didn't realize this is
already the 4th parameter in `box-shadow`, so I made a quick demo:

[https://codepen.io/gkoberger/pen/rNOommB](https://codepen.io/gkoberger/pen/rNOommB)

~~~
thomasahle
So you use a negative spread-radius to make the shadow more narrow than the
box. Cool!

~~~
Zecar
The only problem with this (and it is infuriating) is that while Chrome and
Firefox render box positive box-shadow values identically, they differ
substantially with negative values. As a result, to get matching shadows you
will need to use browser-specific shadows.

------
err4nt
The blur filter is notoriously slow on performance. I find it interesting that
the author didn't explore the "spread" parameter of box-shadow at all, I
wonder if they realize it exists [https://developer.mozilla.org/en-
US/docs/Web/CSS/box-shadow](https://developer.mozilla.org/en-
US/docs/Web/CSS/box-shadow)

~~~
numlock86
> The blur filter is notoriously slow on performance.

I am curious: Do you have some numbers? What is this statement based on?
Intuitively I'd agree, but on a technical level I am not so sure.

~~~
mattkrick
We used to blur content behind modals. When the modal animated in, it'd hit
single digits fps on a MacBook pro. Ditched it for a more opaque scrim and fps
was back at 60.

------
mistercow
Maybe I'm missing some detail, but the blur filter seems pointless. Both box-
shadow and blur() are approximations of gaussian blurs.

If you apply two gaussian blurs, you're multiplying two gaussian functions in
the frequency domain. The product of two gaussian functions is another
gaussian function, so the same effect can be accomplished more efficiently
with a single gaussian blur. You just need to tweak the shadow opacity and
blur radius.

~~~
tobr
Clearly it’s an over-engineered solution, and there is no way the end result
justifies the use of an expensive blur filter. However, just adjusting the
radius and opacity would not produce the exact same effect, since the blur is
not just blurring the shadow, but the whole <div>. This means that the
background color (transparent) will mix with the shadow color. I’m guessing
that’s not even intentional, because it’s a strange effect to seek out - a
drop shadow that becomes _lighter_ close to the object that is supposed to be
blocking the light.

And even that effect should be possible to approximate with a regular box-
shadow, by layering a white shadow on top of a transparent black.

~~~
mistercow
That’s a good point. I didn’t think about the mixing of the interior
background color. And yeah, I agree that that’s a weird property, and would
guess that depending on how you configure the rest of the parameters, could
lead to very strange results.

Actually, I was thinking about this as I went to sleep last night, and I think
I was wrong about the opacity being a factor. The convolution kernels will be
normalized, which means that their composition will also be normalized. That
means that the only parameter to adjust is the radius.

As a side note, it’s kind of interesting that the first property “still a
Gaussian blur” is easiest to see in the frequency domain as a product, while
the second property “still integrates to 1” is easier to see when thinking in
the spatial domain as a convolution.

And one last tidbit my brain wandered to: you might notice that the product of
two Gaussian functions results in a new Gaussian narrower than the originals.
Yet the blur radius in the spatial domain is obviously _wider_. This is
because the Fourier transform of a wider Gaussian is a narrower Gaussian and
vice versa, and _that_ is a special case of the uncertainty principle.

God I miss image processing.

------
ehayes
Layered shadow builder (without blur filter)
[https://brumm.af/shadows](https://brumm.af/shadows)

~~~
kevindeasis
Pretty cool stuff

------
goblin89
Pure CSS box shadows without extra markup can be achieved with using negative
spread (with increased blur to compensate) and multiple shadows. I believe it
allows to achieve the exact look the author demonstrates at the end.

What I'd like to see is browser engines converge on identical box shadow
rendering. Currently shadows tend to be more pronounced in Firefox relative to
WebKit.

~~~
zzo38computer
What I would prefer to see is user settings for box shadow rendering, so that
the user can configure how much pronounced it is or to disable it entirely,
with presets for imitating Firefox and for imitating WebKit.

~~~
goblin89
The problem is that Firefox extends visible shadow past WebKit, too. If you
rely on box shadow to match certain area in your design, such discrepancy in
rendering could break it.

------
crazygringo
A little off-topic, but this site is close to unusable.

On desktop, I had to set my browser zoom to 75% for it to be legible at all,
at which point a new column on the left appeared. I thought I'd accidentally
clicked on a link or something.

Then I tried scrolling with my trackpad and it wouldn't, finally figuring out
because my cursor was over the left half of the screen, and only the box
inside of the right half of the screen scrolls.

The overall visual look is cool, but the usability is _terrible_. Ironic that
the first words on the home page are:

    
    
      Make a good first impression
      Your website might be the first and only interaction with potential customers.
      Don’t screw it up.
      ...overly complex UIs can make for a horrible experience. 
      You need to treat your users with respect and value their time.

------
deefour
Your website is gorgeous.

~~~
zzo38computer
I disagree. It uses too large fonts, too large boxes, to narrow areas, etc.

~~~
Tagbert
With so many sites using tiny, gray fonts on light gray backgrounds, this is
surprisingly readable.

~~~
chipotle_coyote
This complaint is kind of a trope on Hacker News now -- which isn't to say
that there aren't still sites using tiny gray fonts on light gray backgrounds,
but off the top of my head I can't think of any sites that launched or were
redesigned within the last... five or six years now, at least, that still
follow that particular trend. Medium, for both better and worse, has led an
awful lot of design since it exploded onto the scene, and as far as I know
it's _always_ had bigger-than-default body text that's near-black on a pure
white background. WordPress's default theme going back at least to 2016 is the
same way; ditto for Ghost; ditto for virtually every theme from Squarespace.

Again, I'm sure there are lots of sites still out there like this, but I just
don't see them very often. My eyesight isn't top-notch anymore, but the only
site that I routinely visit that I have to have set on a higher-than-default
zoom to be able to read is (ahem) Hacker News, because it uses tiny _black_
fonts on light gray backgrounds. (Except for the places it uses, uh, tiny gray
fonts on light gray backgrounds.)

~~~
retox
SendGrid's website is entirely unusable without zooming; often the fonts
render as less than a pixel wide at normal zoom. Combined with light gray on
white color scheme it makes the site a headache to use.

More amusing was the advertised blogpost last time I logged in that said using
a dark theme for your email promotions was modern and would attract more
interaction.

~~~
chipotle_coyote
Their front page doesn't look that bad to me, but as I poke through other
pages, there's definitely a lot of text at "usually reserved for legal
disclaimers" font size, isn't there?

I don't use Sendgrid, so I don't know what their admin panel is like. I recall
that some of the worst remaining offenders in the "gray text on gray
background" category are SaaS dashboards...

------
the_other
To me, the lower contrast of the "better" boxes makes them "worse". My eye
keeps trying to find the edge of the box and failing; I begin to wonder why
the content is in the box to begin with.

~~~
szszrk
Same for me. I like the first example best, because the last one makes me
dizzy a bit. It feels weird.

------
marcus_holmes
Broken on my browser - the bottom box doesn't display a drop-shadow at all.
(Chromium/Linux)

Also, please nobody actually use this on a site I might visit - using all this
processing power to make a drop shadow marginally better/worse is one of the
many reasons we can't have nice things.

~~~
myfonj
> please nobody actually use this on a site I might visit

Hard to force others to not use it, but you can override those declarations in
your browser's user style sheet so it will not render them (that's what user
styles are for).

` _,_ :before, *:after { box-shadow: none !important; }` in real user style
sheet, i.e. in Firefox profile in chrome sub-folder and
`toolkit.legacyUserProfileCustomizations.stylesheets` turned on should do the
trick. Or -- with boosted selector specificity -- you can use some userstyle
manager extension (like Stylus) to do the same.

------
wx196
Looks like it can be easily achieved with layered shadows,
[https://brumm.af/shadows](https://brumm.af/shadows)

------
touchpadder
Are people getting interested in realistic design again? These days everything
is flat and boring. Bring back the buttons with reflections!

~~~
blegit
Are you talking about bringing back skeuomorphism,
[https://en.m.wikipedia.org/wiki/Skeuomorph](https://en.m.wikipedia.org/wiki/Skeuomorph)
or is that too far?

~~~
theandrewbailey
(I'm not who you replied to)

Skeuomorphism brings to mind iOS design from 10 years ago. It wasn't good
looking at all. (Granted, it was overblown and in your face.)

I'd like a retro look with subtle 3D cues, like how Windows and MacOS used to
look ~20 years ago. Transparency used in some places (like Windows 7) would be
welcome.

------
sfvisser
A 'realistic' drop shadow can never be smaller than the occluding object
itself.

~~~
iainmerrick
It can appear that way if the light source is large, or there are multiple
light sources. Then what you mostly see is a faint penumbra rather than a dark
shadow (the umbra).

~~~
grenoire
True, this is looking like a studio light setup to me, and it's rather
pleasing (albeit not making much sense.)

------
jeffrallen
I want to sue for disability now that I have ripped my eyeballs out because
that page is so ugly.

~~~
zippoxer
why so cruel?

