Tailwind Filter & Backdrop Generator

Visual tool for CSS filter and backdrop-filter utilities.

Filter Controls

Type

Blur 0

0 1 2 3

Brightness (%) 100

Contrast (%) 100

Grayscale

Sepia

Drop Shadow

Enable drop shadow

Preview

🎨

Filter Preview

Adjust controls to see effects

Tailwind Classes

How to Use

Choose between Filter (applies to the element) or Backdrop-filter (applies behind the element).
Adjust sliders for blur, brightness, contrast, and toggle grayscale/sepia.
Configure a drop shadow with X, Y, blur, and color values.
Preview the effects live and copy the generated Tailwind classes.