CSS Filter Generator
Apply photo effects like blur and sepia to images with CSS.
CSS Filters
Apply Instagram-style photo effects with CSS.
Original
px
%
%
%
deg
%
%
%
%
/* No filters applied */
filter: none;What are CSS Filters?
The CSS filter property provides access to graphic effects like blur, color shifting, or contrast adjustment. These are the exact same types of filters you would find in photo editing software, but they are applied in real-time by the browser!
Common Use Cases
- Hover Effects: A common pattern is to make an image slightly desaturated (grayscale) and then transition it to full color on hover.
- Background Blurs: Applying a blur to a background image so text overlaying it remains readable. (Note: for blurring elements behind a container, see
backdrop-filter). - Dark Mode Adjustments: Dimming or lowering the contrast of images automatically when the user is in dark mode to reduce glare.
Performance Considerations
While most filters are highly optimized and run on the GPU, large blurs can be computationally expensive on low-end devices. Use blur() sparingly and test on mobile.
Related Guides
Deepen your understanding with our expert articles.