Tool capabilities
- Input
- Options
- Output
- CSS · Options
How to use CSS Filter Generator
Preview brightness, contrast, saturation, hue, grayscale, sepia, inversion and blur filters before copying CSS.
- Change the colors, text or numeric controls above.
- Compare the preview as you adjust the controls.
- Copy the output or download it to your device.
CSS Filter Generator · Example
Input
{
"brightness": 100,
"contrast": 100,
"saturate": 100,
"hue": 0,
"grayscale": 0,
"sepia": 0,
"invert": 0,
"blur": 0
}Output
filter: brightness(100%) contrast(100%) saturate(100%) hue-rotate(0deg) grayscale(0%) sepia(0%) invert(0%) blur(0px);
Preview brightness, contrast, saturation, hue, grayscale, sepia, inversion and blur filters before copying CSS.
Usage notes
Inputs and results are processed on this device. Tool content is not sent to a processing server.