CSS Filter Generator

Description & Example

Step 1: Choose the filter type from the dropdown. Available options include blur, brightness, contrast, grayscale, invert, sepia, and saturate.

Step 2: Enter the corresponding value for the filter. For example, if you select blur, a typical value might be 5px; if you choose brightness, you might use 150%.

Step 3: Click "Generate Filter CSS" to produce the CSS rule. The tool wraps your input in a filter property.

Example: Selecting blur and entering 5px will produce:

This rule applies a blur effect of 5 pixels to the targeted element. Copy the generated code and paste it into your stylesheet to apply the filter.