• 2020-09-14

    SVG drop shadows

    Author

    Jens Törnell

    Comments

    Start a discussion

    If you use box-shadow on an SVG file it will just add a shadow like a box around the image.

    To have the SVG shadow around the item, you need to use filter: drop-shadow instead.

    Full page

    HTML

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" /></svg>

    CSS

    svg {
  filter: drop-shadow( .25rem .25rem .25rem rgba(0, 0, 0, .7));
}

    Sources