Loading...
Create CSS filter effects with blur, brightness, contrast, grayscale, and more with live preview.
The CSS filter property applies visual effects like blur, brightness, contrast, and color shifts to any HTML element, enabling image-like adjustments directly in the browser.
Upload an image or use gradient preview
filter: none;| Filter | Range | Effect |
|---|---|---|
| blur() | 0 to ∞ px | Gaussian blur |
| brightness() | 0 to ∞ % | Lighten/darken |
| contrast() | 0 to ∞ % | Color contrast |
| grayscale() | 0 to 100% | Remove color |
| hue-rotate() | 0 to 360deg | Shift hue |
| invert() | 0 to 100% | Negative colors |
| saturate() | 0 to ∞ % | Color intensity |
| sepia() | 0 to 100% | Warm brown tone |
Formula
filter: blur() brightness() contrast() grayscale() hue-rotate() invert() opacity() saturate() sepia() drop-shadow()Order matters = filters apply left to right, so grayscale then sepia is not the same as sepia then grayscale
Percentage functions = 100% is the unchanged image, below reduces and above exaggerates
blur() = takes a length, and the radius is a standard deviation rather than a pixel count
drop-shadow() = follows the alpha outline of the content, unlike box-shadow which follows the box
Did you know? drop-shadow() and box-shadow look similar and are not. On a transparent PNG of a circle, box-shadow draws a rectangle behind it while drop-shadow traces the circle, because one reads the element box and the other reads the alpha channel.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.