Tailwind CSS · Utilities reference · all subjects

backdrop-filter

22 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 utility class syntax

The backdrop-contrast utility uses the syntax backdrop-contrast-<number>, backdrop-contrast-(<custom-property>), or backdrop-contrast-[<value>]. The backdrop-contrast-<number> form produces backdrop-filter: contrast(<number>%);. The backdrop-contrast-(<custom-property>) form produces backdrop-filter: contrast(var(<custom-property>));. The backdrop-contrast-[<value>] form produces backdrop-filter: contrast(<value>);.

backdrop-contrast-50 example

backdrop-contrast-50 applies a 50% contrast filter to the backdrop of an element. The CSS produced is backdrop-filter: contrast(50%);.

backdrop-contrast-100 example

backdrop-contrast-100 applies a 100% contrast filter to the backdrop of an element. The CSS produced is backdrop-filter: contrast(100%);.

backdrop-contrast-200 example

backdrop-contrast-200 applies a 200% contrast filter to the backdrop of an element. The CSS produced is backdrop-filter: contrast(200%);.

backdrop-contrast supports responsive design

The backdrop-contrast utility supports responsive design using standard Tailwind responsive breakpoints. For example, you can use md:backdrop-contrast-150 to apply backdrop-contrast-150 only at the medium breakpoint and above.

backdrop-contrast supports custom values

The backdrop-contrast utility supports custom values using the bracket notation syntax. For example, backdrop-contrast-[.25] applies backdrop-filter: contrast(.25);.

backdrop-opacity utility classes

The backdrop-opacity utility class uses the pattern backdrop-opacity-<number>, which generates CSS backdrop-filter: opacity(<number>%);

backdrop-opacity custom property syntax

The backdrop-opacity utility supports custom CSS properties using the syntax backdrop-opacity-(<custom-property>), which generates backdrop-filter: opacity(var(<custom-property>));

backdrop-opacity arbitrary value syntax

The backdrop-opacity utility supports arbitrary values using the syntax backdrop-opacity-[<value>], which generates backdrop-filter: opacity(<value>);

backdrop-opacity example usage

Example backdrop-opacity classes include backdrop-opacity-10, backdrop-opacity-60, and backdrop-opacity-95. These control the opacity of backdrop filters applied to an element.

backdrop-opacity responsive design

The backdrop-opacity utility supports responsive design variants. The default class is backdrop-opacity-100, and responsive variants can be applied using the standard responsive design prefix syntax.

backdrop-hue-rotate responsive design

The backdrop-hue-rotate utility supports responsive design with breakpoint prefixes. The default class is backdrop-hue-rotate-15 and it can be overridden at different breakpoints such as backdrop-hue-rotate-0 for featured states.

negative backdrop-hue-rotate utility class syntax

The negative backdrop-hue-rotate utility uses the class pattern -backdrop-hue-rotate-<number>, which produces the CSS backdrop-filter: hue-rotate(calc(<number>deg * -1));

backdrop-hue-rotate custom property syntax

The backdrop-hue-rotate utility accepts a custom property using the class pattern backdrop-hue-rotate-(<custom-property>), which produces the CSS backdrop-filter: hue-rotate(var(<custom-property>));

backdrop-hue-rotate arbitrary value syntax

The backdrop-hue-rotate utility accepts an arbitrary value using the class pattern backdrop-hue-rotate-[<value>], which produces the CSS backdrop-filter: hue-rotate(<value>);

backdrop-hue-rotate basic example

Example showing basic backdrop-hue-rotate usage: ```html <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-90 ..."></div> </div> <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-180 ..."></div> </div> <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-270 ..."></div> </div> ```

negative backdrop-hue-rotate example

Example showing negative backdrop-hue-rotate usage: ```html <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-15 ..."></div> </div> <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-45 ..."></div> </div> <div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-90 ..."></div> </div> ```

backdrop-sepia default intensity

The backdrop-sepia class without a modifier applies a sepia effect at 100% intensity.

backdrop-sepia with numeric modifiers

Numeric modifiers like backdrop-sepia-0 and backdrop-sepia-50 adjust the sepia intensity as a percentage. backdrop-sepia-0 applies sepia(0%), and backdrop-sepia-50 applies sepia(50%).

backdrop-sepia responsive design support

The backdrop-sepia utilities support responsive design variants, allowing different sepia intensities to be applied at different breakpoints.

backdrop-sepia custom values

The backdrop-sepia utility supports custom values using square bracket notation, such as backdrop-sepia-[0.25], which produces backdrop-filter: sepia(0.25);.

backdrop-sepia utilities syntax

The backdrop-sepia utilities apply sepia filters to an element's backdrop. The class backdrop-sepia produces backdrop-filter: sepia(100%);. The backdrop-sepia-<number> class produces backdrop-filter: sepia(<number>%);. The backdrop-sepia-(<custom-property>) class produces backdrop-filter: sepia(var(<custom-property>));. The backdrop-sepia-[<value>] class produces backdrop-filter: sepia(<value>);.

Give your agent this brain