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 0 0 50 0" result="final" in="SourceGraphic"></feColorMatrix>
<!-- 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">
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"
<!-- GreenFall: `filter: url(#GreenFall)` -->
<svg id="svg-filter-greenfall" class="filter absolute -left-full w-0 h-0">
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
color-interpolation-filters="linearRGB"
values="0.5 -0.4 0.3332 0 0
result="colormatrix"></feColorMatrix>
<!-- Noir: `filter: url(#Noir)` -->
<svg id="svg-filter-noir" class="filter absolute -left-full w-0 h-0">
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"
<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>
<!-- NoirLight: `filter: url(#NoirLight)` -->
<svg id="svg-filter-noirlight" class="filter absolute -left-full w-0 h-0">
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"
<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>
<!-- 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">
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
<!-- 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">
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"
<!-- 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">
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"
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 witin 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}
.