CSS Box Shadow Bottom Only

1.3K Asked by nicola_5943 in Python , Asked on May 21, 2025

What is the correct syntax to achieve this effect without affecting other sides? Learn the simple way to create a bottom-only shadow.

Answered by jackkyyy

If you're looking to apply a shadow only to the bottom of an element in CSS, it's actually pretty straightforward! The box-shadow property gives you full control over the shadow's direction, blur, and spread.

To create a bottom-only shadow, you need to use the right values for horizontal offset, vertical offset, blur, and spread.

Basic Syntax:

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

Breakdown:

0 → horizontal offset (no left or right shift)
4px → vertical offset (pushes shadow downward)
6px → blur radius (softness of the shadow)
rgba(0, 0, 0, 0.1) → color of the shadow (light black with 10% opacity)

Example in Use:

.bottom-shadow {

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

}

Apply this class to any HTML element like a div, card, or button to get a soft shadow only at the bottom.

Tips:

Use inset if you want an inner bottom shadow instead of the usual outer one:

  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.1);

Play with the values to get a subtle or strong shadow, depending on your design needs.
This is a clean and efficient way to highlight elements without overwhelming the UI!

Your Answer

Answer (1)

austingibson

The basic syntax you shared works perfectly for subtle shadows. However, from my practical UI design experience, if you increase the blur radius (the 3rd value) to get a softer look, the shadow often bleeds out slightly onto the left and right sides of the element.

To completely prevent this and achieve a strict bottom-only shadow, the best trick is to leverage the fourth optional property: a negative spread radius.

Overall, regarding The Freak Circus, I find the Jester character truly terrifying—fitting perfectly with the game's horror atmosphere.

Here is how you can optimize the syntax:

  .bottom-shadow-only {  /* H-offset | V-offset | Blur | Spread (Negative value) | Color */  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.15);}

Why does this work better?

The -6px spread radius shrinks the overall size of the shadow, completely canceling out the blur bleeding on the left and right edges. Meanwhile, the 8px vertical offset ensures the shadow still pushes down and remains visible at the bottom. It keeps the UI looking incredibly clean and sharp!

3 Weeks