Frosted
No library Beginner
On focus, the input transitions to a frosted glass look: backdrop-filter blur increases and the background shifts to semi-transparent white. Clean glassmorphism aesthetic.
On focus, the input transitions to a frosted glass look: backdrop-filter blur increases and the background shifts to semi-transparent white. Clean glassmorphism aesthetic.
Goal: Create a "Frosted" glassmorphism input focus animation.
Visual behavior: The input sits on a colorful gradient background (to showcase the frosted effect). At rest: minimal transparency, no blur. On focus: background transitions to a higher opacity white (rgba(255,255,255,0.18)), backdrop-filter blur increases to ~12px with saturation boost, border brightens, and a subtle inner shadow appears. Creates a "frosted glass" appearance like macOS or iOS UI.
Technique:
- Wrapper div with a colorful gradient background
- Input styles: background, backdropFilter, WebkitBackdropFilter, border, boxShadow all transition on focus
- transition: all 300ms ease
- Needs a colorful background behind the input to show the frosted glass effect
Accessibility: Border color change alone is the focus indicator. backdrop-filter is an enhancement; fallback to semi-transparent background if not supported.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.