How to Apply CSS Filter Effects (Blur, Brightness, Contrast, Grayscale)
CSS filter effects let you apply visual modifications to images and elements directly in the browser - no image editing software required. From subtle brightness adjustments to dramatic grayscale conversions, filters transform visuals with a single line of CSS. This guide shows you how to create and combine filter effects using a visual playground that generates clean CSS code.
Step 1: Open the CSS Filter Playground
Go to fixie.tools/filter and upload an image to preview filter effects in real-time. The tool also works with placeholder images if you want to experiment before applying to your own content.
Step 2: Adjust Individual Filter Properties
Use sliders to modify filter values: blur (0-20px softens focus), brightness (0-200% darkens or lightens), contrast (0-200% adjusts difference between light/dark), grayscale (0-100% removes color), hue-rotate (0-360deg shifts colors), saturate (0-200% intensifies colors), sepia (0-100% adds vintage tone).
Step 3: Combine Multiple Filters
Stack multiple filter functions by adjusting several sliders at once. For example, combine brightness(80%) contrast(120%) saturate(110%) to create a moody, high-contrast photo effect. The tool shows the cumulative result as you adjust each filter.
Step 4: Test Preset Filter Styles
Try preset combinations like vintage (sepia + contrast), black and white (grayscale + contrast), vibrant (saturate + brightness), or soft focus (blur + brightness). Presets provide starting points you can customize further.
Step 5: Copy and Apply CSS Code
The tool generates optimized CSS code in real-time. Copy the filter property and paste it into your stylesheet. Filters work on images, divs, backgrounds, and even video elements with full browser support in modern browsers.