CODEWITHSUNDEEP
htmlcss
The Hawk
The Hawk

Reputation: 1568

CSS 3 Inner Drop Shadow

This should be simple, I want a drop shadow, but I want it on the inside of a rectangle. I'm looking for a place on Google, but I can't find it.

enter image description here

Upvotes: 0

Views: 138

Answers (4)

bashleigh
bashleigh

Reputation: 9314

You didn't look hard enough.

box-shadow: inset 2px 2px 3px 3px #333333;

Upvotes: 1

Weafs.py
Weafs.py

Reputation: 22992

Use inset box-shadow.

div {
  width: 200px;
  height: 100px;
  background: white;
  box-shadow: inset 8px 9px 3px -5px #939393;
}
body {
  background: papayawhip;
}
<div></div>

Upvotes: 1

Christoph Werner
Christoph Werner

Reputation: 141

The inset value is what you are looking for.

See this example:

box-shadow: inset 0 0 5px #000;

Look here for further information: developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115044

Yes. As mentioned by @antyrat youcan use an inset box shadow.

body {
  background: #bada55;
}
.shadow {
  width: 250px;
  height: 250px;
  margin: 25px auto;
  background: white;
  box-shadow: inset 3px 3px 3px grey;
}
<div class="shadow"></div>

Support - CanIUse.com

Upvotes: 1

Related Questions