SVG Filters Demo

Using SVG Filters with CSS

SVG filters can be applied to any HTML element using CSS. This powerful combination allows you to create complex visual effects that can be dynamically controlled through CSS.

Key Points:

SVG filters can be defined once and reused multiple times
Filters can be applied to any HTML element using the CSS filter property
Filters can be combined with CSS transitions and animations
Multiple filters can be chained together
Filters can be toggled with CSS pseudo-classes like :hover and :focus

        /* Basic filter usage */
.element {
  filter: url(#filterId);
}

/* Multiple filters */
.element {
  filter: url(#filter1) url(#filter2);
}

/* Combining with CSS filters */
.element {
  filter: url(#svgFilter) blur(5px);
}
      

Live Demo

Hover over the box below to see the blur filter in action:

The box above uses this CSS:

          .demo-box:hover {
  filter: url(#blurFilter);
  transition: filter 0.3s ease;
}
        

Common Use Cases:

Adding blur effects on hover
Creating drop shadows
Image effects (grayscale, sepia, etc.)
Complex animations
Text effects

Browser Support Note:

SVG filters are well-supported in modern browsers. However, it's good practice to provide fallbacks:

          .element {
  /* Fallback for browsers that don't support SVG filters */
  filter: blur(5px);
  /* SVG filter */
  filter: url(#customBlur);
}
        

Original Rectangle

          <svg viewBox="0 0 200 200">
  <rect width="100" height="100" fill="red" />
</svg>
        

Gaussian Blur

This filter applies a Gaussian blur to the rectangle.

          /* SVG Definition */
<filter id="blurFilter">
  <feGaussianBlur in="SourceGraphic" 
    stdDeviation="5" />
</filter>

/* CSS Usage */
.element {
  filter: url(#blurFilter);
}
        

Color Matrix (Grayscale)

This filter converts the rectangle to grayscale using a color matrix.

          /* SVG Definition */
<filter id="colorMatrixFilter">
  <feColorMatrix type="matrix" 
    values="0.33 0.33 0.33 0 0  
            0.33 0.33 0.33 0 0  
            0.33 0.33 0.33 0 0  
            0 0 0 1 0" />
</filter>

/* CSS Usage */
.element {
  filter: url(#colorMatrixFilter);
}
        

Drop Shadow

This filter adds a drop shadow to the rectangle.

          /* SVG Definition */
<filter id="dropShadowFilter">
  <feDropShadow dx="5" dy="5" 
    stdDeviation="3" />
</filter>

/* CSS Usage */
.element {
  filter: url(#dropShadowFilter);
}
        

Combined Filters

This example combines a blur, grayscale conversion, and drop shadow.

          /* SVG Definition */
<filter id="combinedFilter">
  <feGaussianBlur in="SourceGraphic" 
    stdDeviation="3" />
  <feColorMatrix type="matrix" 
    values="0.33 0.33 0.33 0 0  
            0.33 0.33 0.33 0 0  
            0.33 0.33 0.33 0 0  
            0 0 0 1 0" />
  <feDropShadow dx="5" dy="5" 
    stdDeviation="2" />
</filter>

/* CSS Usage */
.element {
  filter: url(#combinedFilter);
}
        

SVG Filters Demonstration