CSS filter Generator

Generate CSS filter values like blur, brightness, contrast, and grayscale with a preview.

Category: Dev Tools

When to use?

Use it to apply blur, brightness, contrast, saturation, and grayscale effects in CSS to image thumbnails, background layers, inactive cards, and hover effects. Combine several filter functions with a live preview.

How to use

  • Adjust Blur·Brightness·Contrast with sliders.
  • Check the result in the preview.
  • Use the reset button to revert.
  • Copy the CSS code.

Input Explanation

Adjust Blur (0~20px), Brightness (0~200%), Contrast (0~200%), Saturate (0~200%), Hue-Rotate (0~360deg), Opacity (0~100%), and Sepia·Invert·Grayscale (0~100%).

Calculation Basis

It combines only non-default filter functions into a filter: ... property. CSS filter order can change the final tone.

Usage Examples

  • Image overlays - Use for dark-mode image dimming, inactive thumbnails, and blurred background layers.
  • Experiment with hover effects - Draft image interactions that change brightness, contrast, or saturate on hover.
  • Share design values - Paste the generated filter value into CSS, design docs, or review comments.

Examples

  • filter: blur(4px) brightness(80%) grayscale(50%)
  • blur 2px + brightness 110% → subtly blur and brighten a background image
  • grayscale(100%) contrast(120%) → a bold black-and-white thumbnail

Cautions

  • Generated output is for reference; test carefully before production use.
  • Heavy filters like blur over large areas can increase rendering cost.

Guides

Combining CSS filters

The filter property chains functions like blur(), brightness(), contrast(), grayscale(), and saturate() with spaces. Combining values quickly creates image tones and states.

Expressing image states

Use grayscale and opacity for inactive images, and brightness or contrast for hover emphasis, to express visual differences per state.

Performance note

Blur and drop-shadow effects over large areas or many images can raise rendering cost. Apply only to needed elements rather than a whole list.

Transition effects

Using filter with transition makes hover or focus states change smoothly. Define separate filter values for the base and interaction states.

FAQ

Can I use several effects at once?

Yes, chain multiple filter functions with spaces.

Can I preview the filter effect?

Yes. Adjusting sliders applies the filter to the preview image live.

Which filters are supported?

You can combine 9 CSS filters like blur, brightness, contrast, grayscale, and saturate.

Does filter affect performance?

Heavy filters like blur over large areas raise rendering cost, so apply only where needed.

Related Tools

  • CSS gradient Generator - Adjust colors and angle to generate linear-gradient CSS.
  • Image Tint Tool - Apply a color overlay or tint to an image.
  • Image Mosaic / Blur - Blur sensitive areas like faces, names, and addresses in photos/screenshots, in the browser.
  • Color Code Converter - Convert HEX, RGB, RGBA, HSL, HSLA color codes to each other and preview the color.
  • JSON Formatter - Beautify or minify JSON strings instantly and check for validity errors.
  • UUID Generator - Generate up to 20 cryptographically secure UUID v4 values at once.