How can I make a fancy drop shadow?

Question

I have an "article" tag and I want to make it have a fancy drop shadow with lifted corners. I want to avoid using images and make it purely with CSS if possible at all.

This is an example of something that looks like what I want to achieve:

Here is my code:

<div class="mainContent">
    <div class="contentWrapper">
        <article class="content">

        </article>
    </div>
<div>

And the CSS I have so far:

.mainContent{
background: #F8F8F8;
width: 100%;
position: absolute;
margin-top:500px;}

.contentWrapper {
margin: auto;
width: 1000px;
padding-top: 50px;}

.content {
margin-bottom: 50px;
padding: 40px;
border: #999 1px solid;
line-height: 25px;
color: #4D4D4D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #FFF;
box-shadow: 0px 0px 1px 1px #e1e1e1 inset, 0px 23px 30px -33px #4D4D4D;}

Check this link. http://cssdeck.com/labs/different-css3-box-shadows-effects — Kheema Pandey, May 25 '14 at 10:51
[This](http://www.w3schools.com/cssref/css3_pr_box-shadow.asp) link could also help you. — LarsBauer, May 25 '14 at 11:07

score 3 · Accepted Answer · answered May 25 '14 at 11:10

Add the css below to a simple div like <div class="shadow lifted"></div>

.shadow {
position:relative;
width:40%;    
padding:1em; 
margin:2em 10px 4em; 
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.shadow:before,
.shadow:after {
content:"";
position:absolute; 
z-index:-2;
}


.lifted {
-moz-border-radius:4px; 
     border-radius:4px;
}

.lifted:before,
.lifted:after { 
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
        box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);    
   -moz-transform:rotate(-3deg);   
    -ms-transform:rotate(-3deg);   
     -o-transform:rotate(-3deg);
        transform:rotate(-3deg);
}

.lifted:after {
right:10px; 
left:auto;
-webkit-transform:rotate(3deg);   
   -moz-transform:rotate(3deg);  
    -ms-transform:rotate(3deg);  
     -o-transform:rotate(3deg);
        transform:rotate(3deg);
}

DEMO

Too much line of code to achieve this shadow effect, you should reduced the lines. — Kheema Pandey, May 25 '14 at 11:14
@KheemaPandey it's because he used prefixes to support all the browsers, if reduces it to support only webkit-based browsers, it will be much shorter. In fact in production code, we can remove all the prefixes and use some library called ***prefix FREE***. — King King, May 25 '14 at 11:26
@King King you are right. A JavaScript library `Modernizr` will be helpful here to use. — Kheema Pandey, May 25 '14 at 11:31

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

box-shadow:

horizontal offset of the shadow

vertical offset of the shadow

blur radius (optional)

spread radius (optional)

http://css-tricks.com/snippets/css/css-box-shadow/

Here's a CodePen of what box-shadow can do.

You can also check out this post on css-tricks.com.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 25 '14 at 11:07

taddy hoops

593
2
16

Are you sure your Demo is working. because I can see the error on your code. Its says `Invalid CSS after "3. blur radius ": expected selector, was "(optional)"` – Kheema Pandey May 25 '14 at 11:09
sorry, fixed. the linter didn't like the comment at the bottom. – taddy hoops May 25 '14 at 11:16

Kheema Pandey · Answer 3 · 2014-05-25T11:34:32.627

You can achieve the shadow effect by writing a few lines of code. Not required too much lines of code.

For all browser support you can use a javascript library called Modernizr.

CHECK the DEMO First.

#box {
  position: relative;
  width: 60%;
  background: #ddd;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}
#box:before, #box:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}
#box:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

How can I make a fancy drop shadow?

3 Answers3