Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I was going through a few website designs and I really liked this pointed corner drop shadow:

enter image description here

How can I add similar shadow effect using The Gimp or simple CSS?

share|improve this question
If you wanted to do it in Illustrator, here is a similar question: How to "draw" pointed corner drop shadows in Adobe Illustrator CS5 – KMSTR Jul 22 '13 at 7:42

Let me speak for CSS only:

The trick is to define an :after and :before pseudo elements which you then rotate and position under your content div.

Basically you create your div with your content:

<div class="box effect">

An apply this CSS rules:

.box {
margin:40px auto;
  position: relative;
.effect2:before, .effect2:after
 z-index: -1;
 position: absolute;
 content: "";
 bottom: 15px;
 left: 10px;
 width: 50%;
 top: 80%;
 background: #777;
 -webkit-box-shadow: 0 15px 10px #777;
 -moz-box-shadow: 0 15px 10px #777;
 box-shadow: 0 15px 10px #777;
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;

This article features a lot of other effects as well.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.