Search code examples
htmlcsssvgshadow

How to add shadow effect along diagonal of SVG in HTML/CSS?

I have a SVG defined in HTML like this:

<svg style="height: 28px; background-color: 'blue'; " viewBox="0 0 436 217" 
      preserveAspectRatio="none" class="Tagline-triangle" fill="#EAEAEA" xmlns="http://www.w3.org/2000/svg">

  <path d="M0 0H436V217L0 0Z"></path>

</svg>

which ends up looking like this: enter image description here

I want to add a shadow effect along the diagonal where the blue and red meet. How can I accomplish this?

Solution

  • You can use filter: drop-shadow() on the triangle svg path. It's only not supported in IE11 and opera mini.

    .shadow {
  filter: drop-shadow(3px 15px 20px rgb(0 0 0 / 1));
}
    <svg viewBox="0 0 436 217" style="background-color: blue; height: 28px; width: 100%;" preserveAspectRatio="none" class="Tagline-triangle" fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
  <path class="shadow" d="M0 0H436V217L0 0Z"></path>
</svg>

    You can do the drop shadow filter style inline on the path if you want.

    <svg viewBox="0 0 436 217" style="background-color: blue; height: 28px; width: 100%;" preserveAspectRatio="none" class="Tagline-triangle" fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0H436V217L0 0Z" style="filter: drop-shadow(3px 15px 20px rgb(0 0 0 / 1));"></path>
</svg>