Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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
1  
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
add comment

1 Answer 1

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">
...
</div>

An apply this CSS rules:

.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
 z-index: -1;
 position: absolute;
 content: "";
 bottom: 15px;
 left: 10px;
 width: 50%;
 top: 80%;
 max-width:300px;
 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);
}
.effect2:after
{
-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
add comment

Your Answer

 
discard

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.