CSS Filter Playground
Apply CSS filters with live preview on any image
filter: none;
How to use
Upload your own image or use one of the built-in sample images. Each slider controls a different CSS filter property. Adjust blur, brightness, contrast, grayscale, hue rotation, inversion, opacity, saturation, sepia, and drop shadow in real time. Use the presets for quick starting points. Copy the generated CSS with one click.
Formula
Examples
Vintage photo effect
Set sepia to 60%, contrast to 110%, brightness to 90%, and saturate to 80% to create a warm vintage film look. Copy the CSS and apply it to hero images or photo galleries.
Black and white conversion
Set grayscale to 100% and bump contrast to 130% for a high-contrast black and white effect. Reduce brightness to 90% for a moodier tone.
Hover highlight effect
Start with brightness at 80% and saturate at 70% for a muted resting state. On hover, transition to 100% brightness and 130% saturate to make the image pop.
Frequently asked questions
What CSS filters are available?
CSS supports 10 filter functions: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, and drop-shadow. You can combine any number of them in a single filter declaration. This playground lets you adjust all 10 with live preview.
Do CSS filters affect page performance?
Filters trigger GPU compositing, so they are hardware-accelerated on modern browsers. Static filters on a few images have negligible impact. Animating filters on large elements or applying them to many elements simultaneously can increase GPU memory usage. Use will-change: filter sparingly.
What is the difference between filter and backdrop-filter?
The filter property applies effects to the element itself (including its children). The backdrop-filter property applies effects to the area behind the element, which is used for frosted glass effects. This playground focuses on the standard filter property.
Can I animate CSS filters?
Yes. All filter functions are animatable with CSS transitions or keyframe animations. For example, transition: filter 0.3s ease lets you smoothly change filters on hover. Combine this playground with the CSS Animation Generator for animated filter effects.
How does drop-shadow differ from box-shadow?
The drop-shadow filter respects the alpha channel of the image, so it follows the shape of transparent PNGs and SVGs. box-shadow always creates a rectangular shadow around the element bounding box. Use drop-shadow for non-rectangular shapes.
About this tool
Apply and combine CSS filters with live preview. Adjust blur, brightness, contrast, grayscale, sepia, hue-rotate, and drop-shadow on your own image.
All calculations are performed locally in your browser. Your data never leaves your device.