SVG Filters - Skeleton

How It Works

This feature is enabled by SVG filters paired with feColorMatrix transformations.

Usage

Apply a filter to any element using the Filter style property and passing the unique SVG Filter ID.

<!-- The Target Element -->
<img ... style="filter: url(#Apollo)" />

<!-- The SVG Filter with a matching unique ID -->
<svg><filter id="Apollo">...</filter></svg>

We’ve provided a curated collection of SVG Filters to choose from below.

#Apollo

#BlueNight

#Emerald

#GreenFall

#Noir

#NoirLight

#Rustic

#Summer

#XPro

<!-- Apollo: `filter: url(#Apollo)` -->
<svg id="svg-filter-apollo" class="absolute -left-full w-0 h-0">
  <filter id="Apollo" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feColorMatrix values="0.8 0.6 -0.4 0.1 0,
      0 1.2 0.05 0 0,
      0 -1 3 0.02 0,
      0 0 0 50 0" result="final" in="SourceGraphic"></feColorMatrix>
  </filter>
</svg>

<!-- BlueNight: `filter: url(#BlueNight)` -->
<svg id="svg-filter-bluenight" class="filter absolute -left-full w-0 h-0">
  <filter id="BlueNight" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feColorMatrix
      type="matrix"
      values="1.000 0.000 0.000 0.000 0.000
                    0.000 1.000 0.000 0.000 0.05
                    0.000 0.000 1.000 0.000 0.400
                    0.000 0.000 0.000 1.000 0.000"
    ></feColorMatrix>
  </filter>
</svg>

<!-- GreenFall: `filter: url(#GreenFall)` -->
<svg id="svg-filter-greenfall" class="filter absolute -left-full w-0 h-0">
  <filter
    id="GreenFall"
    x="-20%"
    y="-20%"
    width="140%"
    height="140%"
    filterUnits="objectBoundingBox"
    primitiveUnits="userSpaceOnUse"
    color-interpolation-filters="linearRGB"
  >
    <feColorMatrix
      type="matrix"
      values="0.5 -0.4 0.3332 0 0
          0 0.4 0.3 0 0
          0 0 0.5 0 0
          0 0 0 500 -20"
      x="0%"
      y="0%"
      width="100%"
      height="100%"
      in="SourceGraphic"
      result="colormatrix"></feColorMatrix>
  </filter>
</svg>

<!-- Noir: `filter: url(#Noir)` -->
<svg id="svg-filter-noir" class="filter absolute -left-full w-0 h-0">
  <filter
    id="Noir"
    x="-20%"
    y="-20%"
    width="140%"
    height="140%"
    filterUnits="objectBoundingBox"
    primitiveUnits="userSpaceOnUse"
    color-interpolation-filters="linearRGB"
  >
    <feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="colormatrix1"
    ></feColorMatrix>
    <feBlend mode="lighten" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" in2="colormatrix1" result="blend"></feBlend>
    <feBlend mode="multiply" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" in2="diffuseLighting" result="blend1"></feBlend>
  </filter>
</svg>

<!-- NoirLight: `filter: url(#NoirLight)` -->
<svg id="svg-filter-noirlight" class="filter absolute -left-full w-0 h-0">
  <filter
    id="NoirLight"
    x="-20%"
    y="-20%"
    width="140%"
    height="140%"
    filterUnits="objectBoundingBox"
    primitiveUnits="userSpaceOnUse"
    color-interpolation-filters="linearRGB"
  >
    <feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="colormatrix2"
    ></feColorMatrix>
    <feBlend mode="saturation" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="colormatrix2" result="blend2"></feBlend>
    <feBlend mode="screen" x="0%" y="0%" width="100%" height="100%" in="colormatrix2" in2="blend2" result="blend3"></feBlend>
    <feColorMatrix type="luminanceToAlpha" x="0%" y="0%" width="100%" height="100%" in="blend3" result="colormatrix3"></feColorMatrix>
    <feBlend mode="exclusion" x="0%" y="0%" width="100%" height="100%" in="blend3" in2="colormatrix3" result="blend5"></feBlend>
  </filter>
</svg>

<!-- Rustic: `filter: url(#Rustic)` -->
<svg id="svg-filter-rustic" class="filter absolute -left-full w-0 h-0">
  <filter id="Rustic" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feColorMatrix
      type="matrix"
      in="SourceGraphic"
      result="colormatrix"
      values="0.39215686274509803 0.39215686274509803 0.39215686274509803  0 0
          0.3333333333333333 0.3333333333333333 0.3333333333333333  0 0
          0.30980392156862746 0.30980392156862746 0.30980392156862746  0 0
          0 0 0 1 0"
    ></feColorMatrix>
  </filter>
</svg>

<!-- Summer84: `filter: url(#Summer84)` -->
<svg id="svg-filter-summer84" class="filter absolute -left-full w-0 h-0">
  <filter id="Summer84" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feColorMatrix
      type="matrix"
      values="1.300 0.200 0.000 0.000 0.000
          0.300 0.600 0.200 0.000 0.000
          0.200 1.000 0.200 0.000 0.000
          0.000 0.000 0.000 1.000 0.000"
    ></feColorMatrix>
  </filter>
</svg>

<!-- XPro: `filter: url(#XPro)` -->
<svg id="svg-filter-xpro" class="filter absolute -left-full w-0 h-0">
  <filter id="XPro" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feColorMatrix
      type="matrix"
      values="1.70 -0.20 0.00 0.00 0.00
                    0.10 0.800 0.30 0.00 0.00
                    0.20 0.300 0.50 0.00 0.00
                    0.00 0.00 0.00 1.00 0.00"
    ></feColorMatrix>
  </filter>
</svg>

Create a Filter

We recommend SVG Color Matrix Mixer by Rik Schennink to create your own filters.

Tips

The SVG must be in the same scope as the elements you wish to filter. Global scope is acceptable.
Consder storing your SVGs within your local project for quick and reusable imports.
All Vite-based frameworks support SVG imports.
Optionally you can embed the SVG within a imported component (ex: Apollo.svelte, Apollo.tsx).
Filter SVGs are affected by the flow DOM, including class styles such as space-{x|y}.