How to make nice box-shadows

Recently I have been learning how to design better webpage elements. It is still mostly CSS stuff. CSS is the thing that has been around for so long and I have worked with it so many times, but not in a serious sense. But now I would really like to dive deeper and step up my CSS game.

Basic Syntax

Quoting directly from developer.mozilla.org:

/* Keyword values */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

/* Rules */
Specify a single box-shadow using:

 - Two, three, or four <length> values.
    - If only two values are given, they are interpreted as <offset-x><offset-y> values.
    - If a third value is given, it is interpreted as a <blur-radius>.
    - If a fourth value is given, it is interpreted as a <spread-radius>.
 - Optionally, the inset keyword.
 - Optionally, a <color> value.

To specify multiple shadows, provide a comma-separated list of shadows.

Transformed into examples:

box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 5em 1em gold;
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Examples of a Nice Shadow

Okay, tbh these examples from Mozilla are outright random and ugly. Let’s make some better ones:

box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

The reason these shadows are much better is because they look more realistic; more subtle and blurred, which really lifts up the element from the paper. Actually these two examples are taken from Tailwind CSS(which is a very good, utility-first css library) with some slight modifications. The basic ingredients in making the second realistic box-shadow here are:

  • a slightly opaque black = rgba(0, 0, 0, 0.1)
  • a high blur radius = 25px
  • a negative spread = -5px
  • a downward offset

If you have these 3 elements in place, at least your shadow would look good, like this:

box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

But if you compare this back to the previous example, you will notice there is an extra layer of shadow (0 10px 10px -5px rgba(0, 0, 0, 0.04)) being applied. This extra layer is a more compact one and is even dimmer. It looks like this on its own:

box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.04);

By combining the base shadow with this smaller and dimmer shadow, you get an even better look from the base shadow as the closer area to the box gets a little bit more darker, which adds some more realism to the feel of it.

Alternate Uses

Actually, beside being used as a shadow to boost the feel of material design, box-shadow can be used to add extra background layers to your images.

Published by Mageek

Just another geek in the world

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: