Filters
Preview
Generated CSS
Presets
CSS Filter Generator lets you apply and preview CSS filter functions to images in real-time. Adjust sliders for blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. Preview the effect on a sample image or upload your own. Copy the complete filter: CSS property value and use it directly in your stylesheets. Supports multiple stacked filters with correct CSS syntax.
The CSS filter property applies graphical effects directly in the browser without any image editing software. Available filter functions: blur(px) -- Gaussian blur. brightness(%) -- 0 is black, 100 is normal, 200 is double brightness. contrast(%) -- 0 is gray, 100 normal, 200 high contrast. grayscale(%) -- 0 is normal, 100 is full grayscale. hue-rotate(deg) -- rotates hue on the color wheel (0-360). invert(%) -- 100 inverts all colors (negative). opacity(%) -- 0 is transparent, 100 is opaque. saturate(%) -- 0 is grayscale, 100 normal, 200 double saturation. sepia(%) -- 100 is full sepia (brownish vintage tone). drop-shadow(x y blur color) -- shadow that follows element shape.
CSS filters vs SVG filters: CSS filter functions are shorthand for underlying SVG filter effects and are GPU-accelerated in modern browsers. SVG filters (filter: url(#filterId)) allow more complex effects: feTurbulence for noise/grunge texture, feColorMatrix for precise color manipulation, feComposite, feBlend, feDisplacementMap, feMorphology (erode/dilate). CSS backdrop-filter (supported in all modern browsers) applies filters to the area behind an element -- used for frosted-glass effects: backdrop-filter: blur(10px) brightness(1.1).
Vintage photo effect
Result: filter: sepia(60%) contrast(110%) brightness(90%) saturate(80%)
Frosted glass background
Result: backdrop-filter: blur(12px) brightness(0.9) saturate(1.5); background: rgba(255,255,255,0.1)
Dark mode image adjustment
Result: filter: brightness(0.85) contrast(1.1) -- slightly dim images in dark mode for less harshness
What is the difference between filter and backdrop-filter?
filter: applies the effect to the element itself and everything inside it (its children, text, borders, images, etc.). The element is rendered, then the filter is applied to the composed result. backdrop-filter: applies the effect to the area rendered BEHIND the element (underneath it in the stacking order). The element itself is not filtered -- only its background. This creates frosted-glass/blur-behind effects. Example: .glass-card { backdrop-filter: blur(16px) saturate(1.5); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); }. backdrop-filter has good support (Chrome 76+, Firefox 103+, Safari 9+). Note: backdrop-filter only works when the element has a background (even rgba(0,0,0,0.001)).
How do CSS filters affect performance?
CSS filters trigger GPU-accelerated compositing in modern browsers -- they create a new composite layer. This means the filtered element is rendered to a separate texture on the GPU, which is very fast for static elements. Performance concerns: blur() is the most expensive filter -- large blur radii are costly. Animating filter values continuously (animation or transition) keeps the element on the GPU but causes per-frame re-filtering. For animation, prefer: animating transform and opacity (already GPU-accelerated). If you must animate filters, use will-change: filter to hint the browser. Avoid applying filter to large DOM subtrees unnecessarily. drop-shadow is more expensive than box-shadow because it must analyze element shape.
How do I create a dark mode image adjustment with CSS filters?
A common issue in dark mode: images with white backgrounds look harsh. CSS solution: @media (prefers-color-scheme: dark) { img:not([src*='.svg']) { filter: brightness(0.85) contrast(1.05); } }. This slightly dims images and adds a tiny contrast boost. Alternative for dark-background images: filter: brightness(0.9) saturate(0.9). For inverted themes (truly dark: invert everything): filter: invert(1) hue-rotate(180deg) on the root, then invert back on images: img { filter: invert(1) hue-rotate(180deg); } -- this re-inverts the image to look normal while the rest of the page stays dark. Tailwind CSS: dark:brightness-90 etc. as utility classes.
What are SVG filter primitives and how do they relate to CSS filters?
CSS filter functions are shorthand for SVG filter primitives (feGaussianBlur, feColorMatrix, etc.). You can use complex SVG filters directly:
Can I animate CSS filters?
Yes, CSS filters are animatable. transition: filter 0.3s ease-out; .card:hover { filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }. For keyframe animation: @keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 4px #58a6ff); } 50% { filter: drop-shadow(0 0 16px #58a6ff) brightness(1.2); } } .element { animation: pulse-glow 2s ease-in-out infinite; }. Performance: use will-change: filter if the animation is long-running, to tell the browser to prepare a GPU layer. blur() transitions can be expensive -- for pop-in effects, prefer transitioning both filter: blur() and opacity together (opacity changes are cheap). JavaScript: element.style.filter = `blur(${value}px)` for dynamic filter control.