Web Design 101: How to Use Drop Shadows Effectively (using GenerateBlocks)

If you’ve been following my Design to Dollars newsletter, I recently discussed how using drop shadows can make or break your design. Today, I’m going to talk about two ways I personally use drop shadows to enhance my designs without letting them become a distraction.

1. Using Text Shadows for Readability

One of the key ways I use drop shadows is on text, especially when text is overlaid on top of an image. This adds depth and, more importantly, improves readability.

For example, let’s say you have a headline on an image background that’s difficult to read because the text doesn’t stand out. You can address this by adding a text shadow and lightening the background image.

How to Add a Text Shadow:

1. Select your headline in the editor.
2. Since the new GenerateBlocks update doesn’t yet support text shadows in Global Classes, we’ll use the Legacy style effects.
3. Scroll down to Text Shadow and select it. This adds a default drop shadow with preset colors, offsets, and blur settings.
4. Adjust the shadow to make it dark enough to be effective, but not too dark that it looks too 3D or distracts from the design.
5. Set the Z offset to 0 to keep the shadow centered on the text.
6. Increase the blur to around 20 to soften the shadow and make it less harsh.
7. Adjust the opacity to around 65% to maintain visibility without overpowering the design.

Next, you can lighten the background image to further enhance readability. Select the container with the image and reduce the background opacity to around 75%.

After refreshing the page, you’ll notice that the text with the drop shadow is much more visible compared to the untreated text. This subtle enhancement makes a big difference in the overall design.

2. Using Box Shadows for Card Designs

Another area where I use drop shadows is on card designs. Adding a subtle shadow can create depth and help lift certain elements off the page, making them stand out without altering the background.

For example, if you have a three-section card layout with a light gray background, the edges of the cards might blend in too much. A box shadow can add that extra element of depth and make the cards more distinct.

How to Add a Box Shadow:

1. Select the outer container of the card.
2. Unlike text shadows, the new GenerateBlocks Global Classes do support box shadows.
3. Create a new style—let’s call it Box Shadow—and choose a blank style.
4. Scroll down to Effects and select Box Shadow.
5. Adjust the settings:
   • Zero out the offsets to keep the shadow centered.
   • Set the blur to around 12-20 pixels for a softer edge.
   • Choose black as the shadow color and reduce the opacity to around 8%.
   • Adjust the spread to around 2-4 pixels to control the shadow’s size.

Once you’ve applied the box shadow, you’ll notice that the cards lift off the page slightly, adding depth without overpowering the design.

You can also apply the same Global Style to other cards on the page, ensuring consistency across your design. After refreshing the page, you’ll see that the cards are now easier to distinguish from the background, creating a more polished look.

Final Thoughts

These are the two primary ways I recommend using drop shadows in your designs. While you can experiment with harsher or more dramatic shadows, I’ve found that the most subtle effects are often the most effective.