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)" }} />;
{
/* Via arbitrary Tailwind syntax */
}
<Avatar classes="[filter:url(#Apollo)]" />;
{
/* The SVG Filter with a matching unique ID */
}
<svg>
<filter id="Apollo">...</filter>
</svg>;<!-- The Target Element -->
<img style="filter: url(#Apollo)" />
<!-- Via arbitrary Tailwind syntax -->
<Avatar classes="[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.
export default function Default() {
return (
<div className="grid w-full grid-cols-3 gap-4">
{/* Apollo */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="Apollo filter"
loading="lazy"
style={{ filter: "url(#Apollo)" }}
/>
<span className="badge preset-tonal">#Apollo</span>
<svg id="svg-filter-apollo" className="absolute -left-full h-0 w-0">
<filter
id="Apollo"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="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>
</div>
{/* BlueNight */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="BlueNight filter"
loading="lazy"
style={{ filter: "url(#BlueNight)" }}
/>
<span className="badge preset-tonal">#BlueNight</span>
<svg id="svg-filter-bluenight" className="absolute -left-full h-0 w-0 filter">
<filter
id="BlueNight"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="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>
</div>
{/* Emerald */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="Emerald filter"
loading="lazy"
style={{ filter: "url(#Emerald)" }}
/>
<span className="badge preset-tonal">#Emerald</span>
<svg id="svg-filter-emerald" className="absolute -left-full h-0 w-0 filter">
<filter
id="Emerald"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feColorMatrix
type="matrix"
in="SourceGraphic"
result="colormatrix"
values=".16 .185 .129 0 0 .16 .185 .129 0 0 .16 .185 .129 0 0 0 0 0 0.33 0"
></feColorMatrix>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.03 0.9"></feFuncR>
<feFuncG type="table" tableValues="0.57 1"></feFuncG>
<feFuncB type="table" tableValues="0.49 0.53"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
<feBlend
mode="normal"
in="componentTransfer"
in2="SourceGraphic"
result="blend"
></feBlend>
</filter>
</svg>
</div>
{/* GreenFall */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="GreenFall filter"
loading="lazy"
style={{ filter: "url(#GreenFall)" }}
/>
<span className="badge preset-tonal">#GreenFall</span>
<svg id="svg-filter-greenfall" className="absolute -left-full h-0 w-0 filter">
<filter
id="GreenFall"
x="-20%"
y="-20%"
width="140%"
height="140%"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="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>
</div>
{/* Noir */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="Noir filter"
loading="lazy"
style={{ filter: "url(#Noir)" }}
/>
<span className="badge preset-tonal">#Noir</span>
<svg id="svg-filter-noir" className="absolute -left-full h-0 w-0 filter">
<filter
id="Noir"
x="-20%"
y="-20%"
width="140%"
height="140%"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="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>
</div>
{/* NoirLight */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="NoirLight filter"
loading="lazy"
style={{ filter: "url(#NoirLight)" }}
/>
<span className="badge preset-tonal">#NoirLight</span>
<svg id="svg-filter-noirlight" className="absolute -left-full h-0 w-0 filter">
<filter
id="NoirLight"
x="-20%"
y="-20%"
width="140%"
height="140%"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="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>
</div>
{/* Rustic */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="Rustic filter"
loading="lazy"
style={{ filter: "url(#Rustic)" }}
/>
<span className="badge preset-tonal">#Rustic</span>
<svg id="svg-filter-rustic" className="absolute -left-full h-0 w-0 filter">
<filter
id="Rustic"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="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>
</div>
{/* Summer84 */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="Summer84 filter"
loading="lazy"
style={{ filter: "url(#Summer84)" }}
/>
<span className="badge preset-tonal">#Summer84</span>
<svg id="svg-filter-summer84" className="absolute -left-full h-0 w-0 filter">
<filter
id="Summer84"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="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>
</div>
{/* XPro */}
<div className="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
className="rounded-container"
alt="XPro filter"
loading="lazy"
style={{ filter: "url(#XPro)" }}
/>
<span className="badge preset-tonal">#XPro</span>
<svg id="svg-filter-xpro" className="absolute -left-full h-0 w-0 filter">
<filter
id="XPro"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
colorInterpolationFilters="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>
</div>
</div>
);
}<div class="grid w-full grid-cols-3 gap-4">
<!-- Apollo -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="Apollo filter"
loading="lazy"
style="filter: url(#Apollo)"
/>
<span class="badge preset-tonal">#Apollo</span>
<svg id="svg-filter-apollo" class="absolute -left-full h-0 w-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>
</div>
<!-- BlueNight -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="BlueNight filter"
loading="lazy"
style="filter: url(#BlueNight)"
/>
<span class="badge preset-tonal">#BlueNight</span>
<svg id="svg-filter-bluenight" class="absolute -left-full h-0 w-0 filter">
<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>
</div>
<!-- Emerald -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="Emerald filter"
loading="lazy"
style="filter: url(#Emerald)"
/>
<span class="badge preset-tonal">#Emerald</span>
<svg id="svg-filter-emerald" class="absolute -left-full h-0 w-0 filter">
<filter
id="Emerald"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feColorMatrix
type="matrix"
in="SourceGraphic"
result="colormatrix"
values=".16 .185 .129 0 0 .16 .185 .129 0 0 .16 .185 .129 0 0 0 0 0 0.33 0"
></feColorMatrix>
<feComponentTransfer in="colormatrix" result="componentTransfer">
<feFuncR type="table" tableValues="0.03 0.9"></feFuncR>
<feFuncG type="table" tableValues="0.57 1"></feFuncG>
<feFuncB type="table" tableValues="0.49 0.53"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"
></feBlend>
</filter>
</svg>
</div>
<!-- GreenFall -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="GreenFall filter"
loading="lazy"
style="filter: url(#GreenFall)"
/>
<span class="badge preset-tonal">#GreenFall</span>
<svg id="svg-filter-greenfall" class="absolute -left-full h-0 w-0 filter">
<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>
</div>
<!-- Noir -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="Noir filter"
loading="lazy"
style="filter: url(#Noir)"
/>
<span class="badge preset-tonal">#Noir</span>
<svg id="svg-filter-noir" class="absolute -left-full h-0 w-0 filter">
<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>
</div>
<!-- NoirLight -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="NoirLight filter"
loading="lazy"
style="filter: url(#NoirLight)"
/>
<span class="badge preset-tonal">#NoirLight</span>
<svg id="svg-filter-noirlight" class="absolute -left-full h-0 w-0 filter">
<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>
</div>
<!-- Rustic -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="Rustic filter"
loading="lazy"
style="filter: url(#Rustic)"
/>
<span class="badge preset-tonal">#Rustic</span>
<svg id="svg-filter-rustic" class="absolute -left-full h-0 w-0 filter">
<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>
</div>
<!-- Summer84 -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="Summer84 filter"
loading="lazy"
style="filter: url(#Summer84)"
/>
<span class="badge preset-tonal">#Summer84</span>
<svg id="svg-filter-summer84" class="absolute -left-full h-0 w-0 filter">
<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>
</div>
<!-- XPro -->
<div class="flex flex-col items-center space-y-2">
<img
src={`https://picsum.photos/seed/skeleton/320`}
class="rounded-container"
alt="XPro filter"
loading="lazy"
style="filter: url(#XPro)"
/>
<span class="badge preset-tonal">#XPro</span>
<svg id="svg-filter-xpro" class="absolute -left-full h-0 w-0 filter">
<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>
</div>
</div>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}.