Grayscale
100%
Filter stack
filter: grayscale(100%);
Design Tools
CSS Filter Generator — Live Image Effects
Combine blur, grayscale, contrast, and related CSS filter functions with live preview. Drag sliders to build stacks such as filter: blur(2px) grayscale(100%); and copy the result.
DesignCSSFilter
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
CSS Filter Generator
CSS Filter Rule
filter: none;
等待调整滤镜。
Use cases
- Try grayscale or muted filter values for site icons or product cards
How to use
- Drag the filter sliders, then copy the CSS from the output panel into your stylesheet
Example input and output
FAQ
Is browser support limited?
CSS filter is widely supported on modern desktop and mobile browsers.
Tools
Related tools
Continue with another translated tool for a nearby task.
Color Inverter
Color Inverter — RGB Invert and Dark Preview
Invert a color by subtracting each RGB channel from 255. Compare source and inverted colors, preview sample layers, and export a CSS variable snippet for dark-theme exploration.
Color Invert Dark
Pastel Color Generator
Pastel Color Generator — Soft Low-Saturation Palettes
Generate soft pastel and Morandi-style palettes in your browser. Choose count and style, lock swatches you want to keep, and export HEX lists or CSS variables for charts, backgrounds, and gentle UI themes.
Pastel Palette Color