04 / 28

Pure TailwindMIT licensed

Tailwind Frosted Glass Input

A frosted field floating over a blurred gradient. backdrop-blur-[20px] backdrop-saturate-150 does the frost, isolate traps the -z-10 backdrop inside the component, and the inner bevel is one inset shadow.

Live DemoSep 12, 2026

Plain CSSTailwind v4

Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<div class="tif-04 grid min-h-svh w-full place-items-center bg-tif04-bg px-6 py-14 font-tif04-sans" aria-label="Frosted glass input demo">
  <div class="relative isolate w-full max-w-70 overflow-hidden rounded-2xl p-3.5">
    <div class="absolute inset-0 -z-10 scale-120 bg-[radial-gradient(40%_60%_at_30%_30%,#f59e0b_0%,transparent_60%),radial-gradient(50%_60%_at_80%_70%,#7c3aed_0%,transparent_60%)] bg-tif04-deep blur-2xl" aria-hidden="true"></div>
    <label class="grid gap-1.5">
      <span class="text-[11px] tracking-[0.1em] text-white/70 uppercase">Search</span>
      <input type="search" name="tif04-q" placeholder="Search anything…"
        class="w-full rounded-[10px] border border-white/20 bg-white/10 px-3 py-2.5 text-sm text-white shadow-[inset_0_1px_0_oklch(1_0_0/0.18)] backdrop-blur-[20px] backdrop-saturate-150 outline-none transition-[border-color,background-color] duration-200 placeholder:text-white/45 focus:border-white/50 focus:bg-white/16">
    </label>
  </div>
</div>

<div class="tif-04 grid min-h-svh w-full place-items-center bg-tif04-bg px-6 py-14 font-tif04-sans" aria-label="Frosted glass input demo">
  <div class="relative isolate w-full max-w-70 overflow-hidden rounded-2xl p-3.5">
    <div class="absolute inset-0 -z-10 scale-120 bg-[radial-gradient(40%_60%_at_30%_30%,#f59e0b_0%,transparent_60%),radial-gradient(50%_60%_at_80%_70%,#7c3aed_0%,transparent_60%)] bg-tif04-deep blur-2xl" aria-hidden="true"></div>
    <label class="grid gap-1.5">
      <span class="text-[11px] tracking-[0.1em] text-white/70 uppercase">Search</span>
      <input type="search" name="tif04-q" placeholder="Search anything…"
        class="w-full rounded-[10px] border border-white/20 bg-white/10 px-3 py-2.5 text-sm text-white shadow-[inset_0_1px_0_oklch(1_0_0/0.18)] backdrop-blur-[20px] backdrop-saturate-150 outline-none transition-[border-color,background-color] duration-200 placeholder:text-white/45 focus:border-white/50 focus:bg-white/16">
    </label>
  </div>
</div>

@import "tailwindcss";

@theme {
  --color-tif04-bg: #12121a;
  --color-tif04-bg: oklch(0.19 0.015 285);
  --color-tif04-deep: #0a0a14;
  --color-tif04-deep: oklch(0.15 0.014 280);
  --font-tif04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tif-04 {
  width: 100%;
}

.tif-04 ::selection {
  background: #f59e0b;
  color: #0a0a14;
}

@import "tailwindcss";

@theme {
  --color-tif04-bg: #12121a;
  --color-tif04-bg: oklch(0.19 0.015 285);
  --color-tif04-deep: #0a0a14;
  --color-tif04-deep: oklch(0.15 0.014 280);
  --font-tif04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tif-04 {
  width: 100%;
}

.tif-04 ::selection {
  background: #f59e0b;
  color: #0a0a14;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist

@import "tailwindcss";

@theme {
  --color-tif04-bg: #12121a;
  --color-tif04-bg: oklch(0.19 0.015 285);
  --color-tif04-deep: #0a0a14;
  --color-tif04-deep: oklch(0.15 0.014 280);
  --font-tif04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tif-04 {
  width: 100%;
}

.tif-04 ::selection {
  background: #f59e0b;
  color: #0a0a14;
}

@import "tailwindcss";

@theme {
  --color-tif04-bg: #12121a;
  --color-tif04-bg: oklch(0.19 0.015 285);
  --color-tif04-deep: #0a0a14;
  --color-tif04-deep: oklch(0.15 0.014 280);
  --font-tif04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tif-04 {
  width: 100%;
}

.tif-04 ::selection {
  background: #f59e0b;
  color: #0a0a14;
}

3Fonts used by this demooptional — skip if you have your own type stack

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

isolation: isolate — the single most load-bearing line in the CSS original — becomes the utility isolate, sitting next to the overflow-hidden it partners with.
The -webkit-backdrop-filter duplicate is gone: Tailwind emits the prefix itself.
The two radial gradients stay arbitrary. They are artwork, not a design-scale value, and nothing else in the demo reads them.

Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Frosted Glass Input
Source: https://codefronts.com/components/tailwind-css-input-fields/tailwind-frosted-glass-input/

A frosted field floating over a blurred gradient. backdrop-blur-[20px] backdrop-saturate-150 does the frost, isolate traps the -z-10 backdrop inside the component, and the inner bevel is one inset shadow.
## HTML
```html
<div class="tif-04 grid min-h-svh w-full place-items-center bg-tif04-bg px-6 py-14 font-tif04-sans" aria-label="Frosted glass input demo">
  <div class="relative isolate w-full max-w-70 overflow-hidden rounded-2xl p-3.5">
    <div class="absolute inset-0 -z-10 scale-120 bg-[radial-gradient(40%_60%_at_30%_30%,#f59e0b_0%,transparent_60%),radial-gradient(50%_60%_at_80%_70%,#7c3aed_0%,transparent_60%)] bg-tif04-deep blur-2xl" aria-hidden="true"></div>
    <label class="grid gap-1.5">
      <span class="text-[11px] tracking-[0.1em] text-white/70 uppercase">Search</span>
      <input type="search" name="tif04-q" placeholder="Search anything…"
        class="w-full rounded-[10px] border border-white/20 bg-white/10 px-3 py-2.5 text-sm text-white shadow-[inset_0_1px_0_oklch(1_0_0/0.18)] backdrop-blur-[20px] backdrop-saturate-150 outline-none transition-[border-color,background-color] duration-200 placeholder:text-white/45 focus:border-white/50 focus:bg-white/16">
    </label>
  </div>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tif04-bg: #12121a;
  --color-tif04-bg: oklch(0.19 0.015 285);
  --color-tif04-deep: #0a0a14;
  --color-tif04-deep: oklch(0.15 0.014 280);
  --font-tif04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tif-04 {
  width: 100%;
}

.tif-04 ::selection {
  background: #f59e0b;
  color: #0a0a14;
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Frosted Glass Input
Source: https://codefronts.com/components/tailwind-css-input-fields/tailwind-frosted-glass-input/

A frosted field floating over a blurred gradient. backdrop-blur-[20px] backdrop-saturate-150 does the frost, isolate traps the -z-10 backdrop inside the component, and the inner bevel is one inset shadow.
## HTML
```html
<div class="tif-04 grid min-h-svh w-full place-items-center bg-tif04-bg px-6 py-14 font-tif04-sans" aria-label="Frosted glass input demo">
  <div class="relative isolate w-full max-w-70 overflow-hidden rounded-2xl p-3.5">
    <div class="absolute inset-0 -z-10 scale-120 bg-[radial-gradient(40%_60%_at_30%_30%,#f59e0b_0%,transparent_60%),radial-gradient(50%_60%_at_80%_70%,#7c3aed_0%,transparent_60%)] bg-tif04-deep blur-2xl" aria-hidden="true"></div>
    <label class="grid gap-1.5">
      <span class="text-[11px] tracking-[0.1em] text-white/70 uppercase">Search</span>
      <input type="search" name="tif04-q" placeholder="Search anything…"
        class="w-full rounded-[10px] border border-white/20 bg-white/10 px-3 py-2.5 text-sm text-white shadow-[inset_0_1px_0_oklch(1_0_0/0.18)] backdrop-blur-[20px] backdrop-saturate-150 outline-none transition-[border-color,background-color] duration-200 placeholder:text-white/45 focus:border-white/50 focus:bg-white/16">
    </label>
  </div>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tif04-bg: #12121a;
  --color-tif04-bg: oklch(0.19 0.015 285);
  --color-tif04-deep: #0a0a14;
  --color-tif04-deep: oklch(0.15 0.014 280);
  --font-tif04-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tif-04 {
  width: 100%;
}

.tif-04 ::selection {
  background: #f59e0b;
  color: #0a0a14;
}
```

How this works

Isolation is the whole trick. backdrop-filter samples what is painted behind it, and -z-10 on the gradient would escape to the page root without a stacking context. In utilities that is one word:

class="relative isolate overflow-hidden rounded-2xl p-3.5"

The fill must stay translucent. A blur over opaque paint is a no-op, so bg-white/10 is load-bearing; the focus state raises it to bg-white/16 rather than swapping in a solid.

Make it yours

Gradient: the two radial stops are arbitrary background values on the backdrop layer — high-saturation pairs frost hardest.
Frost: backdrop-blur-[20px] and backdrop-saturate-150; raise saturation to offset the desaturation heavy blur causes.
Depth: bg-white/10 → bg-white/16, keeping the focus fill proportionally higher.
Corners: rounded-2xl on the shell, rounded-[10px] on the field — or set both equal for a chunkier look.

Gotchas — read before shipping

Drop isolate and the backdrop layer disappears behind the page background — the field still renders, just with nothing to frost.
Firefox shipped unprefixed backdrop-filter in 103; older versions show a flat translucent fill, which degrades acceptably.
overflow-hidden + rounded-* + backdrop-filter can flicker on iOS Safari during scroll. Test on device.

Browser support

Chrome	Safari	Firefox	Edge
111+	16.4+	128+	111+

backdrop-filter is Baseline; without it the field is a plain translucent box, unbroken.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗blur filtertw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗