CODEWITHSUNDEEP
css
joy
joy

Reputation: 3707

Shadow effect using CSS

I need to implement shadow effect as below attached mockup. I have highlighted the shadow effect that I need to implement as red box. I have been told to use the sprite image to implement this shadow effect which I don't like. Can I use CSS3 shadow effect to implement this?

enter image description here

Please advice

Upvotes: 3

Views: 131

Answers (1)

Tanya Sinha
Tanya Sinha

Reputation: 634

try this:

hr {
height: 1px;
margin: 50px 0;
background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0,0,0,0)), color-stop(0.5, #333333), to(rgba(0,0,0,0)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: -moz-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: -o-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
border: 0;
}

hr:after { 
display: block; 
content:'';
height: 30px;
background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0)));
background: -webkit-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
background: -moz-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
background: -o-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
background: radial-gradient(farthest-side at center top, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
}
<hr>

Upvotes: 7

Related Questions