CSS Filters

Transform images and elements with Instagram-like effects using pure CSS. Apply blur, brightness, contrast, and more for instant visual transformation.

Basic Filter Functions

CSS filters provide graphical effects like blur, colour shifting, and more. Apply them to any element for instant visual transformation.

Blur & Brightness

Original

blur(5px)

brightness(1.5)

brightness(0.5)

css

Contrast & Grayscale

contrast(2)

contrast(0.5)

grayscale(1)

grayscale(0.5)

css

Hue Rotate & Invert

hue-rotate(90deg)

hue-rotate(180deg)

invert(1)

invert(0.5)

css

Saturate & Sepia

saturate(2)

saturate(0.5)

sepia(1)

sepia(0.5)

css

Advanced Filter Techniques

Combine multiple filters and use special effects to create unique visual styles.

Drop Shadow

Basic Shadow

Colour Shadow

Multiple Shadows

css

Combined Filters

Vintage

Cool Tone

Warm Tone

Dramatic

css

SVG Filters

css

Interactive Filter Playground

Experiment with different filter combinations in real-time!

Adjust Filters

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Saturate100%

Sepia0%

css

.element {
    filter: none;
}

Before & After Comparison

Drag the slider to compare the original image with popular filter presets. See how combined filters create distinct moods.

Warm, nostalgic look with boosted contrast and subtle sepia

⟨⟩

OriginalFiltered

.element {
    filter:
    contrast(1.2)
    brightness(1.1)
    sepia(0.3)
    saturate(1.4);
}

Creative Filter Effects

Push the boundaries with creative filter applications and animations.

Hover Effects

Blur on Hover

Brighten

Hue Shift

Grayscale

css

Animated Filters

Pulsing

Rotating Hue

Glitch

css

Text Effects

Shadow Text

Glowing Text

Blurred Text

css

Filter Best Practices

Performance & Accessibility Tips

Performance

Filters can be GPU-intensive. Test performance, especially on mobile devices. Use will-change: filter sparingly to hint browser optimisation.

Subtlety is Key

Often, subtle filter effects work better than dramatic ones for professional designs. Small adjustments can make a big difference.

Accessibility

Ensure filtered content remains readable and doesn't rely solely on colour. Always provide sufficient contrast ratios.

css

Continue Your Journey

Filters mastered! Apply your skills to real-world components, or explore blend modes for even more visual effects.

Buttons

Craft beautiful, interactive button components

Blend Modes

Layer and blend elements for creative effects

Search pages