@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-hue-rotate.mdx

@@ -0,0 +1,173 @@
+import { ApiTable } from "@/components/api-table";
+import { Example } from "@/components/example";
+import { Figure } from "@/components/figure";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content";
+
+export const title = "backdrop-filter: hue-rotate()";
+export const description = "Utilities for applying backdrop hue-rotate filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-hue-rotate-<number>", "backdrop-filter: hue-rotate(<number>deg);"],
+    ["-backdrop-hue-rotate-<number>", "backdrop-filter: hue-rotate(calc(<number>deg * -1));"],
+    ["backdrop-hue-rotate-(<custom-property>)", "backdrop-filter: hue-rotate(var(<custom-property>));"],
+    ["backdrop-hue-rotate-[<value>]", "backdrop-filter: hue-rotate(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-hue-rotate-90` and `backdrop-hue-rotate-180` to rotate the hue of an element's backdrop:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-hue-rotate-90
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-hue-rotate-90"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-hue-rotate-180
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-hue-rotate-180"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-hue-rotate-270
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-hue-rotate-270"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-hue-rotate-90,backdrop-hue-rotate-180,backdrop-hue-rotate-270] -->
+<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>
+```
+
+</Figure>
+
+### Using negative values
+
+Use utilities like `-backdrop-hue-rotate-90` and `-backdrop-hue-rotate-180` to set a negative backdrop hue rotation value:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            -backdrop-hue-rotate-15
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 -backdrop-hue-rotate-15"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            -backdrop-hue-rotate-45
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 -backdrop-hue-rotate-45"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            -backdrop-hue-rotate-90
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 -backdrop-hue-rotate-90"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:-backdrop-hue-rotate-15,-backdrop-hue-rotate-45,-backdrop-hue-rotate-90] -->
+<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>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  utility="backdrop-hue-rotate"
+  value="3.142rad"
+  name="backdrop hue rotation"
+  variable="backdrop-hue-rotation"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  property="backdrop-filter: hue-rotate()"
+  defaultClass="backdrop-hue-rotate-15"
+  featuredClass="backdrop-hue-rotate-0"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-invert.mdx

@@ -0,0 +1,99 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "backdrop-filter: invert()";
+export const description = "Utilities for applying backdrop invert filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-invert", "backdrop-filter: invert(100%);"],
+    ["backdrop-invert-<number>", "backdrop-filter: invert(<number>%);"],
+    ["backdrop-invert-(<custom-property>)", "backdrop-filter: invert(var(<custom-property>))"],
+    ["backdrop-invert-[<value>]", "backdrop-filter: invert(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-invert` and `backdrop-invert-65` to control the color inversion of an element's backdrop:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-invert-0
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert-0"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-invert-65
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert-65"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-invert
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-invert-0,backdrop-invert-65,backdrop-invert] -->
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-invert-0 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-invert-65 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-invert ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="backdrop-invert" value=".25" name="backdrop inversion" variable="backdrop-inversion" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="backdrop-filter: invert()"
+  defaultClass="backdrop-invert-0"
+  featuredClass="backdrop-invert"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-opacity.mdx

@@ -0,0 +1,103 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "backdrop-filter: opacity()";
+export const description = "Utilities for applying backdrop opacity filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-opacity-<number>", "backdrop-filter: opacity(<number>%);"],
+    ["backdrop-opacity-(<custom-property>)", "backdrop-filter: opacity(var(<custom-property>));"],
+    ["backdrop-opacity-[<value>]", "backdrop-filter: opacity(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-opacity-50` and `backdrop-opacity-75` to control the opacity of all the backdrop filters applied to an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-opacity-10
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert backdrop-opacity-10"></div>
+            <img
+              className="object-coveryea size-32 rounded-lg"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-opacity-60
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert backdrop-opacity-60"></div>
+            <img
+              className="object-coveryea size-32 rounded-lg"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-opacity-95
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-invert backdrop-opacity-95"></div>
+            <img
+              className="object-coveryea size-32 rounded-lg"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-opacity-10,backdrop-opacity-60,backdrop-opacity-95] -->
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-invert backdrop-opacity-10 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-invert backdrop-opacity-60 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-invert backdrop-opacity-95 ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  utility="backdrop-opacity"
+  value=".15"
+  name="backdrop filter opacity"
+  variable="backdrop-filter-opacity"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  property="backdrop-filter: opacity()"
+  defaultClass="backdrop-opacity-100"
+  featuredClass="backdrop-opacity-60"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-saturate.mdx

@@ -0,0 +1,98 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "backdrop-filter: saturate()";
+export const description = "Utilities for applying backdrop saturation filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-saturate-<number>", "backdrop-filter: saturate(<number>%);"],
+    ["backdrop-saturate-(<custom-property>)", "backdrop-filter: saturate(var(<custom-property>));"],
+    ["backdrop-saturate-[<value>]", "backdrop-filter: saturate(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-saturate-50` and `backdrop-saturate-100` utilities to control the saturation of an element's backdrop:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-saturate-50
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-saturate-50"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-saturate-125
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-saturate-125"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-saturate-200
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-saturate-200"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-saturate-50,backdrop-saturate-125,backdrop-saturate-200] -->
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-saturate-50 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-saturate-125 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-saturate-200 ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="backdrop-saturate" value=".25" name="backdrop saturation" variable="backdrop-saturation" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="backdrop-filter: saturate()"
+  defaultClass="backdrop-saturate-50"
+  featuredClass="backdrop-saturate-150"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/backdrop-filter-sepia.mdx

@@ -0,0 +1,95 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "backdrop-filter: sepia()";
+export const description = "Utilities for applying backdrop sepia filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-sepia", "backdrop-filter: sepia(100%);"],
+    ["backdrop-sepia-<number>", "backdrop-filter: sepia(<number>%);"],
+    ["backdrop-sepia-(<custom-property>)", "backdrop-filter: sepia(var(<custom-property>));"],
+    ["backdrop-sepia-[<value>]", "backdrop-filter: sepia(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-sepia` and `backdrop-sepia-50` to control the sepia effect applied to an element's backdrop:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-sepia-0
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-sepia-0"></div>
+            <img
+              className="size-32 rounded-lg object-cover shadow-xl"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-sepia-50
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-sepia-50"></div>
+            <img
+              className="size-32 rounded-lg object-cover shadow-xl"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            backdrop-sepia
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-sepia"></div>
+            <img
+              className="size-32 rounded-lg object-cover shadow-xl"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-sepia-0,backdrop-sepia-50,backdrop-sepia] -->
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-sepia-0 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-sepia-50 ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)]">
+  <div class="bg-white/30 backdrop-sepia ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="backdrop-sepia" value=".25" name="backdrop sepia" />
+
+### Responsive design
+
+<ResponsiveDesign property="backdrop-filter: sepia()" defaultClass="backdrop-sepia" featuredClass="backdrop-sepia-0" />