How to Add Drop Shadows to SVGs Using Only CSS?

How to Create Drop Shadows for SVGs Using CSS3

Is it feasible to create drop shadows for SVG elements using CSS3? Something like:

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

Discussions on creating shadows using filter effects were encountered. Is there an example that only uses CSS? Below is a functional code where the cursor style is applied appropriately but no shadow effect is present. How can the shadow effect be achieved with minimal code?

svg .shadow {
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseprofile="full" viewbox="0 0 120 70">  
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66"></rect>
</svg>

Solution

Employ the CSS 'filter' attribute.

Compatible with webkit browsers, Firefox 34 , and Edge.

A polyfill is available to support FF

Implementation:

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

<img class="shadow lazy" src="/static/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Star_wars2.svg" alt=""    style="max-width:90%">

<svg class="shadow" ...>
  <rect x="10" y="10" width="200" height="100" fill="#bada55"></rect>
</svg>

<svg>
  <g fill="none" stroke="#decade" stroke-width="2" transform="scale(2)">
    <circle class="shadow" cx="20" cy="20" r="19"></circle>
    <path class="shadow" d="M 20,1 V 39"></path>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(135, 20, 20)"></path>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(225, 20, 20)"></path>
  </g>
</svg>

The above is the detailed content of How to Add Drop Shadows to SVGs Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!