🎨
CSS Studio · Color Grading & Effects
CSS Filter Generator
Create, fine-tune, and preview CSS image filters and backdrop-blur effects with live split-screen comparison.
⚡ Presets:
Filter Parameters
Blur:
0px
Brightness:
100%
Contrast:
100%
Grayscale:
0%
Hue Rotate:
0deg
Invert:
0%
Opacity:
100%
Saturate:
100%
Sepia Vintage:
0%
Drop Shadow (PNG & Alpha Channel Support)
Mastering CSS Filters, Color Adjustments & Glassmorphism
CSS Filter Function Reference & Defaults
The CSS filter property enables powerful client-side photo processing directly in CSS without needing external image editors.
| Filter Function | Default Value | Standard Range | Visual Effect |
|---|---|---|---|
| blur() | 0px | 0px to 30px | Gaussian blur softening the edges of an element |
| brightness() | 100% | 0% (black) to 300% (blown out) | Scales the linear illumination intensity |
| contrast() | 100% | 0% (solid gray) to 300% | Expands or contracts difference between darks & lights |
| grayscale() | 0% | 0% (full color) to 100% (mono) | Converts color pixels to monochrome tones |
| hue-rotate() | 0deg | 0deg to 360deg | Rotates the entire color wheel spectrum |
| invert() | 0% | 0% to 100% | Inverts all chromatic channels (useful for dark mode) |
| saturate() | 100% | 0% (desaturated) to 300% | Intensifies or mutes color vibrancy |
| sepia() | 0% | 0% to 100% | Adds a warm vintage brownish tone to photos |
Building Glassmorphism with Backdrop Filter
To achieve a modern Apple-style or Tech-Noir frosted glass card, combine backdrop-filter with a semi-transparent background:
background: rgba(20, 20, 26, 0.7);
backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
Combine this with our CSS transform generator, create animations with our CSS keyframe generator, or inspect web contrast in our contrast checker.