CODEWITHSUNDEEP
css
ariel
ariel

Reputation: 3072

How do I create a box-shadow effect that looks like a curve?

I am familiar with creating basic box-shadows but I can't understand how to create something that looks like a curve. To better explain what I am looking for, I've attached the image. I need something similar to that. How can I create it?

box shadow

Upvotes: 2

Views: 403

Answers (1)

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

I've tried to achieve that somehow with using absolute positioned elements, box shadow and a radial gradient. But overall I would use a background image.

But still have a look at my fiddle which unfortunately doesn't really look like your goal. But it might give you a starting point.

enter image description here HTML

<div id="wrapper">
    <ul id="nav">
    </ul>
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS

body {
    background: #FEFEFE;
}

#wrapper {
     position: relative;  
     display: block;
    width: 960px;
    height: 80px;
    overflow: hidden;
}
ul {
    height: 40px;
    width: 100%;
    background: #FFF;
    box-shadow: 0px 3px 5px 0px #ccc;
    position: absolute;
    z-index: 300;
    display: block;
    padding: 0;
    margin: 0;
    border: solid 2px #EEE;
    border-bottom: solid 1px #FEFEFE;
}

#first {
    position: absolute;
    background: none;
    width: 800px;
    height: 50px;
    box-shadow: 0px 10px 50px 5px #000;
    margin-left: -400px;
    top:-20px;
    left: 50%;  
    z-index: 100;
}

#second {
    left: 50%;  
    position: absolute;
    width: 900px;
    z-index: 200;
    margin-left: -450px;
    height:80px;
    top: 15px;
 background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.28) 79%,rgba(255,255,255,0) 100%); /* W3C */
}

Upvotes: 2

Related Questions