Effects
backdrop-filter to Tailwind
Mirrorsfilter with a backdrop- prefix on every utility, and composes the same way.The 73 mappings below are read straight out of Tailwind v4.3.3, not maintained by hand, so this is what the converter will actually produce for backdrop-filter.
backdrop-filter values and their classes
| CSS | Tailwind |
|---|---|
| backdrop-filter: blur(12px); | backdrop-blur-mdalso sets -webkit-backdrop-filter |
| backdrop-filter: blur(16px); | backdrop-blur-lgalso sets -webkit-backdrop-filter |
| backdrop-filter: blur(24px); | backdrop-blur-xlalso sets -webkit-backdrop-filter |
| backdrop-filter: blur(40px); | backdrop-blur-2xlalso sets -webkit-backdrop-filter |
| backdrop-filter: blur(4px); | backdrop-blur-xsalso sets -webkit-backdrop-filter |
| backdrop-filter: blur(64px); | backdrop-blur-3xlalso sets -webkit-backdrop-filter |
| backdrop-filter: blur(8px); | backdrop-blur-smalso sets -webkit-backdrop-filter |
| backdrop-filter: brightness(0); | backdrop-brightness-0also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(100%); | backdrop-brightness-100also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(105%); | backdrop-brightness-105also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(110%); | backdrop-brightness-110also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(125%); | backdrop-brightness-125also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(150%); | backdrop-brightness-150also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(200%); | backdrop-brightness-200also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(50%); | backdrop-brightness-50also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(75%); | backdrop-brightness-75also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(90%); | backdrop-brightness-90also sets -webkit-backdrop-filter |
| backdrop-filter: brightness(95%); | backdrop-brightness-95also sets -webkit-backdrop-filter |
| backdrop-filter: contrast(0); | backdrop-contrast-0also sets -webkit-backdrop-filter |
| backdrop-filter: contrast(100%); | backdrop-contrast-100also sets -webkit-backdrop-filter |
| backdrop-filter: contrast(125%); | backdrop-contrast-125also sets -webkit-backdrop-filter |
| backdrop-filter: contrast(150%); | backdrop-contrast-150also sets -webkit-backdrop-filter |
| backdrop-filter: contrast(200%); | backdrop-contrast-200also sets -webkit-backdrop-filter |
| backdrop-filter: contrast(50%); | backdrop-contrast-50also sets -webkit-backdrop-filter |
| backdrop-filter: contrast(75%); | backdrop-contrast-75also sets -webkit-backdrop-filter |
| backdrop-filter: grayscale(0); | backdrop-grayscale-0also sets -webkit-backdrop-filter |
| backdrop-filter: grayscale(100%); | backdrop-grayscalealso sets -webkit-backdrop-filter |
| backdrop-filter: grayscale(100%); | backdrop-grayscale-100also sets -webkit-backdrop-filter |
| backdrop-filter: grayscale(25%); | backdrop-grayscale-25also sets -webkit-backdrop-filter |
| backdrop-filter: grayscale(50%); | backdrop-grayscale-50also sets -webkit-backdrop-filter |
| backdrop-filter: grayscale(75%); | backdrop-grayscale-75also sets -webkit-backdrop-filter |
| backdrop-filter: hue-rotate(0deg); | backdrop-hue-rotate-0also sets -webkit-backdrop-filter |
| backdrop-filter: hue-rotate(15deg); | backdrop-hue-rotate-15also sets -webkit-backdrop-filter |
| backdrop-filter: hue-rotate(180deg); | backdrop-hue-rotate-180also sets -webkit-backdrop-filter |
| backdrop-filter: hue-rotate(30deg); | backdrop-hue-rotate-30also sets -webkit-backdrop-filter |
| backdrop-filter: hue-rotate(60deg); | backdrop-hue-rotate-60also sets -webkit-backdrop-filter |
| backdrop-filter: hue-rotate(90deg); | backdrop-hue-rotate-90also sets -webkit-backdrop-filter |
| backdrop-filter: invert(0); | backdrop-invert-0also sets -webkit-backdrop-filter |
| backdrop-filter: invert(100%); | backdrop-invertalso sets -webkit-backdrop-filter |
| backdrop-filter: invert(100%); | backdrop-invert-100also sets -webkit-backdrop-filter |
| backdrop-filter: invert(25%); | backdrop-invert-25also sets -webkit-backdrop-filter |
| backdrop-filter: invert(50%); | backdrop-invert-50also sets -webkit-backdrop-filter |
| backdrop-filter: invert(75%); | backdrop-invert-75also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(0); | backdrop-opacity-0also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(10%); | backdrop-opacity-10also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(100%); | backdrop-opacity-100also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(15%); | backdrop-opacity-15also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(20%); | backdrop-opacity-20also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(25%); | backdrop-opacity-25also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(30%); | backdrop-opacity-30also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(35%); | backdrop-opacity-35also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(40%); | backdrop-opacity-40also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(45%); | backdrop-opacity-45also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(5%); | backdrop-opacity-5also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(50%); | backdrop-opacity-50also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(55%); | backdrop-opacity-55also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(60%); | backdrop-opacity-60also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(65%); | backdrop-opacity-65also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(70%); | backdrop-opacity-70also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(75%); | backdrop-opacity-75also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(80%); | backdrop-opacity-80also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(85%); | backdrop-opacity-85also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(90%); | backdrop-opacity-90also sets -webkit-backdrop-filter |
| backdrop-filter: opacity(95%); | backdrop-opacity-95also sets -webkit-backdrop-filter |
| backdrop-filter: saturate(0); | backdrop-saturate-0also sets -webkit-backdrop-filter |
| backdrop-filter: saturate(100%); | backdrop-saturate-100also sets -webkit-backdrop-filter |
| backdrop-filter: saturate(150%); | backdrop-saturate-150also sets -webkit-backdrop-filter |
| backdrop-filter: saturate(200%); | backdrop-saturate-200also sets -webkit-backdrop-filter |
| backdrop-filter: saturate(50%); | backdrop-saturate-50also sets -webkit-backdrop-filter |
| backdrop-filter: sepia(0); | backdrop-sepia-0also sets -webkit-backdrop-filter |
| backdrop-filter: sepia(100%); | backdrop-sepiaalso sets -webkit-backdrop-filter |
| backdrop-filter: sepia(100%); | backdrop-sepia-100also sets -webkit-backdrop-filter |
| backdrop-filter: sepia(50%); | backdrop-sepia-50also sets -webkit-backdrop-filter |
Other effects properties
Converting a whole stylesheet?
Paste it into the converter and get every rule at once, shorthands expanded, media queries turned into breakpoint variants, and the parts that have no Tailwind equivalent flagged rather than dropped.
Open the converter