SVG Filters

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>

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

#Apollo

#BlueNight

#Emerald

#GreenFall

#Noir

#NoirLight

#Rustic

#Summer

#XPro

---
import Apollo from './filters/apollo.astro';
import BlueNight from './filters/blue-night.astro';
import Emerald from './filters/emerald.astro';
import GreenFall from './filters/green-fall.astro';
import Noir from './filters/noir.astro';
import NoirLight from './filters/noir-light.astro';
import Rustic from './filters/rustic.astro';
import Summer from './filters/summer.astro';
import XPro from './filters/x-pro.astro';

const filters = {
	Apollo,
	BlueNight,
	Emerald,
	GreenFall,
	Noir,
	NoirLight,
	Rustic,
	Summer,
	XPro,
} as const;
---

<div class="w-full grid grid-cols-3 gap-4">
	{
		Object.entries(filters).map(([name, Filter], i) => (
			<div class="flex flex-col items-center space-y-2">
				{/* Apply the `filter: url()` style. */}
				<img
					src={`https://picsum.photos/seed/skeleton/320`}
					class="rounded-container"
					alt={`full-${i}`}
					loading="lazy"
					style={`filter: url(#${name})`}
				/>
				<span class="badge preset-tonal">#{name}</span>
				<Filter />
			</div>
		))
	}
</div>

<!-- 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>

<!-- Emerald: `filter: url(#Emerald)` -->
<svg id="svg-filter-emerald" class="filter absolute -left-full w-0 h-0">
	<filter id="Emerald" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
		<!-- RGB, RGB, RGB, Opacity -->
		<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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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"
		colorInterpolacolor-interpolation-filterstionFilters="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}.