Home/ Questions/Q 8750913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:56:58+00:00

I’m triying to create a shadow for a DIV, but it is no ordinary

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0