CSS filter generator

How to use it

1. Drag the sliders. The sample picture changes as you go.
2. Tick Add drop shadow if you want a shadow that follows the shape, then set its offset, blur, color and opacity.
3. Press Copy and paste the rule onto an image, a video or any element.
4. Reset all returns every slider to its neutral position.

What the values mean

• blur takes pixels; the other functions in this tool take percentages, except hue-rotate, which takes degrees.
• brightness, contrast and saturate start at 100 percent. Below that they reduce the effect, above they boost it.
• grayscale, invert and sepia start at 0 percent and top out at 100 percent here.
• opacity below 100 percent makes the element see-through.

Example

filter: grayscale(100%) contrast(120%); turns a photo black and white with a bit more punch.

Tips

• Filters are applied to the element and its children together, so a filter on a card also changes the text inside it.
• Large blur values on big elements can be slow on weak devices. Keep them moderate on animated elements.
• To tint only the background behind a panel, look at backdrop-filter instead; the glassmorphism generator covers it.