utilities/backdrop-filter

42 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

backdrop-contrast-<number> utility

In Tailwind CSS v4, the utility class backdrop-contrast-<number> applies backdrop-filter: contrast(<number>%). For example, backdrop-contrast-50 gives backdrop-filter: contrast(50%) and backdrop-contrast-200 gives backdrop-filter: contrast(200%).

backdrop-contrast-(<custom-property>) utility

In Tailwind CSS v4, the utility class backdrop-contrast-(<custom-property>) applies backdrop-filter: contrast(var(<custom-property>)), allowing a CSS custom property to be used as the contrast value, e.g. backdrop-contrast-(--my-contrast).

backdrop-contrast-[<value>] arbitrary value utility

In Tailwind CSS v4, the utility class backdrop-contrast-[<value>] applies backdrop-filter: contrast(<value>) using an arbitrary value directly, e.g. backdrop-contrast-[.25] applies backdrop-filter: contrast(.25).

backdrop-contrast custom value example

Using a custom value with the backdrop-contrast utility is demonstrated with the value .25, i.e. backdrop-contrast-[.25], which sets backdrop contrast filter accordingly.

backdrop-contrast responsive design example

For responsive design with backdrop-filter: contrast(), the default class example is backdrop-contrast-125 and the featured (responsive breakpoint) class example is backdrop-contrast-150, meaning you can prefix backdrop-contrast utilities with breakpoint variants like sm: or md: to change contrast at different screen sizes.

backdrop-filter: grayscale() utilities

Tailwind v4 provides utilities for applying backdrop-filter grayscale() to an element: `backdrop-grayscale` sets `backdrop-filter: grayscale(100%);`, `backdrop-grayscale-<number>` sets `backdrop-filter: grayscale(<number>%);` (e.g. backdrop-grayscale-50), `backdrop-grayscale-(<custom-property>)` sets `backdrop-filter: grayscale(var(<custom-property>));`, and `backdrop-grayscale-[<value>]` sets `backdrop-filter: grayscale(<value>);` for arbitrary values.

backdrop-grayscale custom value example

You can use a custom value with the backdrop grayscale utility via the arbitrary value syntax, e.g. `backdrop-grayscale-[.5]` or using a CSS custom property with `backdrop-grayscale-(<custom-property>)`, equivalent to setting `backdrop-filter: grayscale(0.5)`.

backdrop-grayscale responsive usage

Backdrop grayscale utilities support responsive design via breakpoint prefixes, e.g. applying `md:backdrop-grayscale-0` overrides the default `backdrop-grayscale` class at the md breakpoint and above, following Tailwind's standard responsive variant pattern.

backdrop-hue-rotate-<number> utility API

Tailwind v4 provides backdrop hue-rotate utilities with the following class-to-CSS mappings: `backdrop-hue-rotate-<number>` maps to `backdrop-filter: hue-rotate(<number>deg);`; `-backdrop-hue-rotate-<number>` (negative variant) maps to `backdrop-filter: hue-rotate(calc(<number>deg * -1));`; `backdrop-hue-rotate-(<custom-property>)` maps to `backdrop-filter: hue-rotate(var(<custom-property>));`; and `backdrop-hue-rotate-[<value>]` maps to `backdrop-filter: hue-rotate(<value>);`.

backdrop-hue-rotate basic usage

Utilities like `backdrop-hue-rotate-90`, `backdrop-hue-rotate-180`, and `backdrop-hue-rotate-270` rotate the hue of an element's backdrop (applied via backdrop-filter: hue-rotate()). Example: `<div class="bg-white/30 backdrop-hue-rotate-90 ..."></div>`.

backdrop-hue-rotate negative values

Negative backdrop hue rotation values are set by prefixing the utility with a minus sign, e.g. `-backdrop-hue-rotate-15`, `-backdrop-hue-rotate-45`, `-backdrop-hue-rotate-90`. There is no negative sign inside the class name numeric part; the dash prefix comes before the whole utility name.

backdrop-hue-rotate custom value syntax

You can supply an arbitrary value for backdrop hue rotation using square-bracket syntax like `backdrop-hue-rotate-[3.142rad]`, or reference a CSS custom property using parentheses syntax like `backdrop-hue-rotate-(<custom-property>)`, which resolves to `backdrop-filter: hue-rotate(var(<custom-property>));`. The named custom property variable convention used in docs is `--backdrop-hue-rotation`.

backdrop-hue-rotate responsive design

Backdrop hue-rotate utilities support responsive variants using standard breakpoint prefixes, e.g. applying `backdrop-hue-rotate-15` by default and switching to `backdrop-hue-rotate-0` at a breakpoint such as `sm:backdrop-hue-rotate-0`.

backdrop-invert utilities API table

Tailwind CSS v4 provides these backdrop-invert utilities: `backdrop-invert` maps to `backdrop-filter: invert(100%);`; `backdrop-invert-<number>` maps to `backdrop-filter: invert(<number>%);`; `backdrop-invert-(<custom-property>)` maps to `backdrop-filter: invert(var(<custom-property>))`; `backdrop-invert-[<value>]` maps to `backdrop-filter: invert(<value>);`.

backdrop-invert basic usage example

Use utilities like `backdrop-invert` and `backdrop-invert-65` to control the color inversion of an element's backdrop. Example: `backdrop-invert-0` applies no inversion, `backdrop-invert-65` applies 65% inversion, and `backdrop-invert` applies 100% inversion. These are typically applied to an overlay div positioned over a background image, e.g. `<div class="bg-white/30 backdrop-invert-65 ..."></div>` inside a parent with a background image like `bg-[url(/img/mountains.jpg)]`.

backdrop-invert custom value syntax

You can use a custom value for backdrop inversion with arbitrary value syntax like `backdrop-invert-[.25]`, or reference a CSS custom property using `backdrop-invert-(<custom-property>)`, for example with a variable named `--backdrop-inversion`.

backdrop-invert responsive design

The `backdrop-invert` utilities support responsive design via breakpoint prefixes. For example, the default class could be `backdrop-invert-0` and a featured responsive class could be `backdrop-invert` applied at a breakpoint (e.g. `md:backdrop-invert`), following Tailwind's standard responsive prefix pattern.

backdrop-opacity-<number> utility

The backdrop-opacity-<number> utility class applies backdrop-filter: opacity(<number>%); to an element, controlling the opacity of all backdrop filters applied to it. Example: backdrop-opacity-50 and backdrop-opacity-75 apply 50% and 75% opacity respectively to the backdrop filters.

backdrop-opacity arbitrary and custom property values

backdrop-opacity-(<custom-property>) applies backdrop-filter: opacity(var(<custom-property>)); allowing a CSS custom property to control the value. backdrop-opacity-[<value>] applies backdrop-filter: opacity(<value>); for arbitrary values.

backdrop-opacity custom value example

You can use a custom value with backdrop-opacity by writing a class like backdrop-opacity-[.15], which sets backdrop-filter: opacity(.15). The associated CSS variable name convention referenced is 'backdrop-filter-opacity'.

backdrop-opacity responsive design default and featured classes

For responsive design with the backdrop-filter: opacity() property, the default class is backdrop-opacity-100 and an example featured responsive class is backdrop-opacity-60 (e.g., used as sm:backdrop-opacity-60 to apply at a breakpoint).

backdrop-saturate-<number> utility

In Tailwind CSS v4, the class `backdrop-saturate-<number>` applies `backdrop-filter: saturate(<number>%);` to an element, controlling the saturation of whatever is behind the element (its backdrop). Example: `backdrop-saturate-50` produces `backdrop-filter: saturate(50%);`.

backdrop-saturate-(<custom-property>) utility

In Tailwind CSS v4, the class `backdrop-saturate-(<custom-property>)` applies `backdrop-filter: saturate(var(<custom-property>));`, allowing a CSS custom property to be used as the saturation value for the backdrop filter.

backdrop-saturate-[<value>] arbitrary value utility

In Tailwind CSS v4, the class `backdrop-saturate-[<value>]` applies `backdrop-filter: saturate(<value>);`, allowing an arbitrary saturation value to be specified directly in square brackets.

backdrop-saturate-50/125/200 examples

Example usage from Tailwind CSS v4 docs: `<div class="bg-white/30 backdrop-saturate-50 ..."></div>`, `<div class="bg-white/30 backdrop-saturate-125 ..."></div>`, and `<div class="bg-white/30 backdrop-saturate-200 ..."></div>` each apply increasing saturation (50%, 125%, 200%) to the element's backdrop, typically shown over a background image.

Custom value for backdrop-saturate

Tailwind CSS v4 supports using a custom value for backdrop saturation, e.g. specifying a value like `.25` maps to a CSS custom property named `backdrop-saturation`, following the pattern used across other utilities for custom values via the `UsingACustomValue` pattern (utility="backdrop-saturate", value=".25", variable="backdrop-saturation").

Responsive backdrop-saturate example

Tailwind CSS v4 responsive design example for `backdrop-filter: saturate()`: the default class is `backdrop-saturate-50` and the featured responsive class is `backdrop-saturate-150`, demonstrating how to apply different saturation at different breakpoints using responsive prefixes (e.g. `sm:backdrop-saturate-150`).

backdrop-sepia utilities

Tailwind CSS v4 provides utilities for applying backdrop sepia filters: `backdrop-sepia` sets `backdrop-filter: sepia(100%);`, `backdrop-sepia-<number>` sets `backdrop-filter: sepia(<number>%);` (e.g. backdrop-sepia-50 sets sepia(50%), backdrop-sepia-0 sets sepia(0%)), `backdrop-sepia-(<custom-property>)` sets `backdrop-filter: sepia(var(<custom-property>));`, and `backdrop-sepia-[<value>]` sets `backdrop-filter: sepia(<value>);` for arbitrary values.

backdrop-sepia custom value example

You can supply an arbitrary sepia value using the syntax `backdrop-sepia-[.25]`, which produces `backdrop-filter: sepia(.25);`. This follows the general UsingACustomValue pattern used throughout Tailwind v4 utilities.

backdrop-sepia responsive usage

Like other utilities in Tailwind v4, backdrop-sepia utilities support responsive design by prefixing with a breakpoint variant, e.g. `sm:backdrop-sepia-0` applies `backdrop-filter: sepia(0%);` only at the `sm` breakpoint and above.

backdrop-filter utility classes

Tailwind v4 provides the following backdrop-filter utilities: `backdrop-filter-none` (backdrop-filter: none;), `backdrop-filter-(<custom-property>)` (backdrop-filter: var(<custom-property>);), and `backdrop-filter-[<value>]` (backdrop-filter: <value>;).

Combining backdrop filter utilities

You can combine multiple backdrop filter utilities on the same element, such as `backdrop-blur-xs` and `backdrop-grayscale`, and they will be composed together into a single backdrop-filter value. The combinable backdrop filter utility categories are: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia.

Removing backdrop filters with backdrop-filter-none

Use the `backdrop-filter-none` utility to remove all backdrop filters applied to an element. Example: `<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>` removes the blur and brightness backdrop filters at the md breakpoint and above.

Custom value syntax for backdrop-filter

You can use a custom value for backdrop-filter with the arbitrary value syntax, e.g. `backdrop-filter-[url('filters.svg#filter-id')]`, or reference a CSS custom property with `backdrop-filter-(<custom-property>)`.

backdrop-brightness utility class syntax

The backdrop-brightness utility in Tailwind CSS v4 has three forms: backdrop-brightness-<number> generates backdrop-filter: brightness(<number>%); backdrop-brightness-(<custom-property>) generates backdrop-filter: brightness(var(<custom-property>)); and backdrop-brightness-[<value>] generates backdrop-filter: brightness(<value>);

backdrop-brightness-50 example usage

The backdrop-brightness-50 utility applies a brightness filter that reduces the brightness of the backdrop to 50% of its original value. This can be applied to an element alongside other classes like bg-white/30.

backdrop-brightness-150 example usage

The backdrop-brightness-150 utility applies a brightness filter that increases the brightness of the backdrop to 150% of its original value. This can be applied to an element alongside other classes like bg-white/30.

backdrop-brightness supports custom values

The backdrop-brightness utility supports arbitrary custom values using square bracket notation, such as backdrop-brightness-[1.75], which allows for precise control beyond the predefined scale.

backdrop-brightness is responsive

The backdrop-brightness utility supports responsive design modifiers. For example, you can use md:backdrop-brightness-150 to apply a different brightness value at different screen sizes.

backdrop-blur utility classes and values

Tailwind CSS v4 provides the following backdrop-blur utility classes: backdrop-blur-none (no blur), backdrop-blur-xs (4px), backdrop-blur-sm (8px), backdrop-blur-md (12px), backdrop-blur-lg (16px), backdrop-blur-xl (24px), backdrop-blur-2xl (40px), and backdrop-blur-3xl (64px). Each uses CSS custom properties via --blur-xs, --blur-sm, --blur-md, --blur-lg, --blur-xl, --blur-2xl, and --blur-3xl respectively. The backdrop-blur-none class outputs an empty backdrop-filter property. Custom properties and arbitrary values are supported via backdrop-blur-(<custom-property>) and backdrop-blur-[<value>] syntax.

backdrop-filter blur CSS output

All backdrop-blur utilities use the CSS property backdrop-filter with the blur() function. The generated CSS follows the pattern 'backdrop-filter: blur(var(--blur-{size}))' for preset sizes, or 'backdrop-filter: blur(<value>)' for custom arbitrary values.

Backdrop-blur scale renamed

In v4, backdrop-blur utilities have been renamed: backdrop-blur-sm → backdrop-blur-xs, backdrop-blur → backdrop-blur-sm.

Give your agent this brain