I’m trying to add a shadow only at the bottom of a div in CSS, not on all sides.
What’s the best way to create a bottom-only box shadow?
Share
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I’m trying to add a shadow only at the bottom of a div in CSS, not on all sides.
What’s the best way to create a bottom-only box shadow?
You can create a bottom box shadow in CSS using the `box-shadow` property. The trick is to give the shadow a positive vertical offset so it appears only at the bottom of the element.
Example:
“`css
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
“`
Explanation:
`0` → horizontal offset
`4px` → vertical offset (moves shadow downward)
`6px` → blur radius
`rgba(0, 0, 0, 0.2)` → shadow color with transparency
Complete example:
“`css
.card {
background: #fff;
padding: 20px;
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
“`
This creates a soft bottom shadow effect often used in modern UI design, cards, buttons, and containers. You can increase the blur and opacity for a stronger shadow or keep it subtle for clean responsive web design.