When used well, a subtle CSS box shadow added to an element can create depth and elevate the design of a page. However, getting them to look good can be trickier than it seems. And with so many properties to tweak and set to get the box shadow just right, trying to create them on the fly can be overwhelming.
There are quite a few CSS box shadow generators out there that do a great job, but I’ve found that if you’re in the flow state and working on a design, even something as simple as navigating to another site to generate a box shadow can take you out of the flow.
Luckily, over the years of working with some talented designers, I’ve discovered an easy system for box shadows that make them simple and effortless to spin up, easy to tweak, and most importantly, look good in the majority of designs.
A quick overview of the box-shadow property
If you haven’t worked with the CSS box-shadow property before, here’s an example of how you might use it:
.shadow {
box-shadow: 2px 4px 8px #000000;
}
There are quite a few options, properties, and variations, if you want to learn more about it in-depth I would recommend the official MDN spec.
For our purposes, we’ll be using the 3 properties with a color definition at the end. The properties are as follows:
box-shadow: offset-x, offset-y, blur-radius, color;
Offset-x and offset-y specify the horizontal and vertical distance of the shadow while blur-radius specifies the amount the shadow will be blurred. Higher values mean more blur while lower values mean a sharper shadow. The color value defines the color of our shadow.
There’s no need to memorize these, but knowing approximately what each thing is doing doesn’t hurt.
The technique
When I’m in the flow working on a design and I’m looking to add a box shadow to some element, I always start here every single time:
.shadow {
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}
In my opinion, this is the one to memorize. It’s a gentle box shadow that looks good in the majority of contexts, and is easy to tweak and modify. It’s fairly simple to remember too. Here’s a Codepen demo:
https://medium.com/media/5c543cf82d1242ef33f71c56419e724f/href
The first 3 properties are multiples of each other, and then the color is defined with an RGBA value that sets it to black with 30% opacity. If you’re not familiar with CSS RGBA functions, I recommend giving this article a quick skim.
Modifying the box shadow
Once you commit that line to memory, modifying it to suit is simple. If the shadow is too light, you can increase the last value of the rgba() function to darken it, or decrease it to lighten it. For example:
// Darker
.dark-shadow {
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
}
// Lighter
.light-shadow {
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}
If you want the shadow to spread further, or sit tighter to the elements, I recommend adjusting the first 3 values at the same time, and always using multiples of 2 or 3 when possible. For example:
// Bigger shadow
.big-shadow {
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);
}
// Tighter shadow
.tight-shadow {
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}
// Multiples of 3 shadow
.three-shadow {
box-shadow: 3px 6px 9px rgba(0, 0, 0, 0.3);
}
In every instance, the important thing is that the property values increase going from left to right, and the rgba() value is always set to black with only the opacity (the last digit) changing.
Conclusion
There are lots of ways to do box shadows, and tons of great generators out there, but with so many options and properties available, having a system to knock them out quickly and on the fly can be an invaluable tool to keep yourself in the flow, or to mock up a design for a client.
By using a great starting point, and limiting the properties we modify to get the results we want, it really helps simplify a process that can otherwise feel a little overwhelming.
And if you’ve got your own technique or system for making box shadows, drop a comment and let me know!
Top comments (0)