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:
Examples of a Nice Shadow
Okay, tbh these examples from Mozilla are outright random and ugly. Let’s make some better ones:
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:
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:
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.
