Today I’m going to show you how to create box shadows using GenerateBlocks 2.0. I’ll walk through a few scenarios where you should and shouldn’t use them, and how to set them up for consistency across your site.
Demo Layout Overview
I’ve set up a demo page with a layout that mimics a services section. It includes a few cards and an overlapping container below them—one shown on a light background and another on a dark background.
When to Use Box Shadows
Box shadows should be used subtly and sparingly. Overusing them can turn a clean, polished design into something dated and clunky. You want to use them in areas that elevate the design in small ways rather than relying on them to carry the page.
A perfect example is in card layouts like the one in this demo. When you place white cards on a light background, the low contrast makes it ideal for a box shadow to add depth and push the boxes forward visually.
Setting Up a Box Shadow in GenerateBlocks
To add a box shadow, select the container holding the card. In GenerateBlocks 2.0, scroll down to the Effects panel and add a new effect. Choose “Box Shadow.”
By default, GenerateBlocks will load a preset: 10px X and Y offset, 5px blur, and 7px spread.
Here’s the setup I use about 80% of the time:
- 15% opacity black
- 0 X offset
- 0 Y offset
- 20px blur
- -4px spread
This setup gives a centered shadow all around the edges. The negative spread keeps it from growing too far outside the container. You can adjust the opacity slightly if you want it darker, but this creates a subtle lift that works well.
Overlapping Containers on White Backgrounds
Another great use of box shadows is when you have overlapping containers. In this layout, the white container overlaps another white background, so the edges get lost.
Adding the same 0/0/20/-4 shadow helps lift it off the page just enough to visually separate it from the background.
When Not to Use Box Shadows
Avoid using box shadows when the contrast between the foreground and background is already very strong—like white on black. In that case, a shadow doesn’t add much.
Even if you apply a dark shadow with the same 0/0/20/-4 settings, it won’t be visible on a dark background. That high contrast between the two colors is already creating the depth you need.
Exception: Overlapping on Dark Backgrounds
One exception is when a container overlaps a dark background. Even if the shadow isn’t visible on the dark section, it helps when the container crosses into a lighter area. It adds a soft edge without requiring a border.
Creating Reusable Box Shadow Classes
To use box shadows consistently across your site, set up a global class.
In my personal starter site, I’ve created a few global classes: shadow-small, shadow-medium, and shadow-large. You don’t need all three, but you should create at least one to keep things consistent.
To set this up:
- Select the container
- Create a new style (e.g.,
shadow-small) - Choose a blank style
- Add the box shadow with settings: 0, 0, 20, -4
Then apply that class to other containers. For example, I added it to the third card in the layout using the shadow-small class.
If later you want to update the shadow sitewide, just edit the class and all elements using it will update automatically.
Using Box Shadows on Buttons
Box shadows can also be used on buttons. Just apply the same global class and it will work. You’re not limited to containers.
However, I don’t recommend stacking shadows—meaning, don’t place a button with a box shadow inside a section that also has a shadow. That layered effect starts to feel pieced together and overdone.
Box shadows should always be subtle and used sparingly.
