CODEWITHSUNDEEP
css
Tahmid
Tahmid

Reputation: 355

Hide only bottom shadow of a Div using CSS

I want to show the box shadow on every side except bottom.

Here is the css I'm using.

box-shadow: 0 0 12px 4px #ddd;

How to remove bottom shadow from it?

Upvotes: 0

Views: 1229

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106008

you may use more than 1 shadow:

body {
  box-shadow: 
    -12px -10px 12px -4px /* negative value here decrease the size */#ddd, 
    12px -10px 12px -4px #ddd, 
    inset 0 -3px lime /* demo , show bottom */;
  padding:4em 8em;
  background:gray;
}

/* demo purpose */
html {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

it can draw things like this

Upvotes: 0

Dre
Dre

Reputation: 2953

You can't change the dimensions of the shadow across one axis only (i.e you can't reduce just the height of the shadow). One trick is to add the shadow to a pseudo element and reduce the height of that element.

.shadow {
  margin:20px;
  width:400px;
  height:200px;
  background:red;
  position:relative;
  }
/* Pseudo element for adding shadow */
.shadow:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:16px;
  box-shadow: 0 0 12px 4px #999;
  z-index:-1;
}
  
<div class="shadow"></div>

Upvotes: 1

Aatish Sai
Aatish Sai

Reputation: 1687

You can use the negative value to push it off the edge.

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  box-shadow: 0px -4px 12px 4px #888888;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div></div>

</body>

</html>

Upvotes: 0

Related Questions