CODEWITHSUNDEEP
htmlcss
GalloPinto
GalloPinto

Reputation: 677

Creating a weird shadow effect in CSS

I'm triying to create a shadow for a DIV, but it is no ordinary box shadow, is a shadow that looks like a Radial Shadow or someting.

enter image description here

I've tried with box-shadow but it doesn't work. What can i use?

Upvotes: 3

Views: 688

Answers (1)

Ozzy
Ozzy

Reputation: 8322

Try this:

<div class="box">
  <div class="shadow">Heading</div>
</div>


.shadow { background:#fff;padding:10px; border:solid 1px #ccc }
.box { position:relative; width:100%; margin-top:30px; z-index:0}
.box .shadow:after{
    bottom: -5px;
    content: " ";
    height: 8px;
    display:block;
    text-indent: -9999px;
    width: 100%;
    left:0;
    position:absolute;
    z-index:-1;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background-image: -ms-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
    background-image: -moz-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
    background-image: -o-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(radial, center top, 0, center top, 490, color-stop(0, #aaaaaa), color-stop(1, #FFFFFF));
    background-image: -webkit-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
    background-image: radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
}

Taken from: http://der-auftritt.de/testcase/gradientshadow.html

p.s. if you want the shadow at the top as well, use the :before selector with the same code

p.p.s. for some really cool gradients use this tool: Gradient Editor

Upvotes: 6

Related Questions