can we give a shadow to a custom css3 shape


I'm trying to give shadow to a trapezium type css3 shape, I'm giving it to box-shadow but that is taking a show as a box i want to add shadow to the edges of the shape.

border-top: 100px solid rgba(255, 255, 255, 0.3);
border-left: 60px solid transparent; 
border-right: 60px solid transparent;
Problem courtesy of: Zaib Azhar Rao


With that CSS

body {
    background: linear-gradient(90deg, lightblue, yellow)

.trapezoid {
    left: 87px;
    top: 50px;
    position: absolute;
    height: 100px;
    width: 500px;

.trapezoid:before, .trapezoid:after {
    content: '';
    position: absolute;
    width: 65%;
    height: 100%;
    border-color: red;
    border-style: solid;
    border-radius: 10px;
    background-color: lightblue;
    box-shadow: 4px 4px 6px black;
    z-index: -1;
     -webkit-animation: shadow 2s infinite; 
.trapezoid:before {
    left: -7%;
    border-width: 3px 0px 3px 3px;
    -webkit-transform: skewX(-20deg);

.trapezoid:after {
    right: 0px;
    border-width: 3px 3px 3px 0px;
    -webkit-transform: skewX(20deg);
    clip: rect(-40px, 450px, 220px, 30px);

@-webkit-keyframes shadow {
      0% {    box-shadow: 10px 10px 4px  black;}
     25% {    box-shadow: -10px 10px 4px black;}
     50% {    box-shadow: -10px -10px 4px black;}
     75% {    box-shadow: 10px -10px 4px black;}
    100% {    box-shadow: 10px 10px 4px black;}

you get this

As a bonus, animated on webkit.

(The shadow is not perfect, specially if you give it blur, but is what you can get with CSS only)

Solution courtesy of: vals


no you can not give a shadow to anymore sides than 4 (to anything other than a box)

it is called BOX-shadow for that reason.

keep in mind it also means horizontal and vertical only... anything diagonal will not work. 2 sides horizontal , 2 sides vertical

Discussion courtesy of: CRABOLO

If you want to add shadows to completely irregular shapes and not just distorted rectangles then you can use a CSS3 filter call drop-shadow

    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    -moz-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));

This has the effect of producing a shadow that is the same shape as you source object (irregular edges, notches and sticking out bits included)

You could also use a SVG image that apply a shadow and that in a style

<svg height="0" xmlns="">
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
    <feOffset dx="12" dy="12" result="offsetblur"/>
    <feFlood flood-color="rgba(0,0,0,0.5)"/>
    <feComposite in2="offsetblur" operator="in"/>
      <feMergeNode in="SourceGraphic"/>

such as

.shadow {

A complete comparison details the use of this these techniques ans well as showing many interesting examples of their use.

Even IE has a filter to help do this (not so good as the ways shown above)

.shadow {
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
Discussion courtesy of: Code Uniquely

This recipe can be found in it's original form on Stack Over Flow.