Filters

Twigwind provides powerful CSS filter utilities to apply visual effects to elements. Create stunning visual effects with blur, brightness, contrast, and more!

🎨 Basic Filter Usage

Apply filters using the filter: prefix followed by the filter type and value

Syntax

<!-- Basic filter syntax -->
<div class="filter:blur-5px">Blurred element</div>
<div class="filter:brightness-150">Bright element</div>
<div class="filter:grayscale-100">Grayscale element</div>

<!-- Background filters -->
<div class="bg-filter:blur-10px">Background blur</div>
<div class="backdrop-filter:blur-20px">Backdrop blur</div>

🔧 Available Filters

Blur

filter:blur-3px

Bright

filter:brightness-150

Contrast

filter:contrast-200

Grayscale

filter:grayscale-100

Hue Rotate

filter:hue-rotate-90deg

Invert

filter:invert-100

Saturate

filter:saturate-200

Sepia

filter:sepia-100

📋 Filter Reference Table

Filter	Twigwind Class	Description	Values
`blur`	`filter:blur-{value}px`	Applies a blur effect	0px to 50px
`brightness`	`filter:brightness-{value}`	Adjusts brightness	0 to 200 (percentage)
`contrast`	`filter:contrast-{value}`	Adjusts contrast	0 to 200 (percentage)
`drop-shadow`	`filter:drop-shadow-{x}-{y}-{blur}-{color}`	Applies drop shadow	Custom values
`grayscale`	`filter:grayscale-{value}`	Converts to grayscale	0 to 100 (percentage)
`hue-rotate`	`filter:hue-rotate-{value}deg`	Rotates hue	0deg to 360deg
`invert`	`filter:invert-{value}`	Inverts colors	0 to 100 (percentage)
`saturate`	`filter:saturate-{value}`	Adjusts saturation	0 to 200 (percentage)
`sepia`	`filter:sepia-{value}`	Applies sepia tone	0 to 100 (percentage)

✨ Backdrop Filters

Create glass morphism effects with backdrop filters

Glass Morphism Effect

This content has a backdrop filter applied, creating a frosted glass effect behind it.

backdrop-filter:blur-10px

Backdrop Filter Examples

<!-- Glass morphism card -->
<div class="backdrop-filter:blur-10px bg-rgba(255,255,255,0.1) border-1 border-rgba(255,255,255,0.2)">
  Glass morphism content
</div>

<!-- Frosted overlay -->
<div class="backdrop-filter:blur-20px backdrop-filter:brightness-110">
  Frosted overlay
</div>

🎭 Multiple Filters

Combine multiple filters for complex effects

Original

No filters applied

Multiple Filters

Combined effects

Multiple Filter Combinations

<!-- Vintage photo effect -->
<div class="filter:sepia-80 filter:contrast-120 filter:brightness-110">
  Vintage photo
</div>

<!-- Dramatic effect -->
<div class="filter:contrast-150 filter:saturate-130 filter:brightness-90">
  Dramatic image
</div>

<!-- Soft glow -->
<div class="filter:blur-1px filter:brightness-120 filter:saturate-110">
  Soft glow effect
</div>

🎨 Creative Filter Effects

Vintage

Multiple vintage filters

Neon

Hue rotate + saturate

Dramatic

High contrast effect

Dreamy

Soft dreamy effect

🎯 Hover Effects

Apply filters on hover for interactive elements

Interactive Filter Effects

<!-- Hover blur effect -->
<div class="hover:filter:blur-3px transition:all_0.3s_ease">
  Blur on hover
</div>

<!-- Hover brightness -->
<img class="hover:filter:brightness-110 transition:all_0.2s_ease" src="image.jpg">

<!-- Hover grayscale to color -->
<div class="filter:grayscale-100 hover:filter:grayscale-0 transition:all_0.4s_ease">
  Color on hover
</div>

📱 Responsive Filters

Apply different filters at different screen sizes

Responsive Filter Examples

<!-- Different blur on mobile vs desktop -->
<div class="filter:blur-5px md:filter:blur-2px lg:filter:blur-0">
  Responsive blur
</div>

<!-- Brightness adjustments -->
<div class="filter:brightness-90 sm:filter:brightness-100 lg:filter:brightness-110">
  Responsive brightness
</div>

⚡ Performance Tips

Use sparingly - Filters can impact performance, especially on mobile devices
Combine filters - Multiple filter properties are more efficient than separate elements
Test on devices - Always test filter performance on target devices
Consider alternatives - Sometimes CSS transforms or opacity can achieve similar effects
Use will-change - Add will-change: filter for animated filters

🌟 Browser Support

CSS filters are well supported in modern browsers:

Chrome/Edge - Full support
Firefox - Full support
Safari - Full support
Mobile browsers - Good support with performance considerations

Note: Backdrop filters have more limited support and may require fallbacks for older browsers.