About the glassmorphism login form prompt
A frosted login card floating over a blurred gradient background, with icon-prefixed inputs, a remember-me row and a social sign-in row.
What you get
- A fixed background layer with three large blurred orbs that drift on slow independent loops, plus a fine dotted grain overlay
- A frosted card at 412px with a translucent fill, a hairline border and an inset top highlight
- Email and password fields with inline SVG icons that turn accent on focus, and a soft four-pixel focus ring
- A custom checkbox built from a real input with a CSS-drawn tick
- A full-width gradient submit button with an arrow that slides on hover
- A divider and three social buttons carrying real Google, GitHub and Apple marks
Techniques it uses
Worth knowing whether you run the prompt or write the code yourself.
backdrop-filter for real glass
blur(26px) with saturate(150%) samples what is behind the card. It only reads as glass when something varied sits behind it, which is why the drifting orbs matter.
An @supports fallback
@supports not (backdrop-filter: blur(2px)) swaps the translucent fill for a solid one, so the card never becomes unreadable where the property is unsupported.
An inset top highlight
inset 0 1px 0 rgba(255,255,255,.14) in the box-shadow makes the top edge catch light, which is what sells the surface as physical rather than just transparent.
A styled checkbox that stays accessible
The real input is visually hidden but still focusable. :checked + .box paints it and :focus-visible + .box draws the ring, so keyboard users lose nothing.
How to adapt it
Change the mood
The three orb colours are the whole palette. Swap the violet, pink and cyan for any three hues and the card, which is only translucent white, adapts on its own.
Make the glass stronger or weaker
One --blur token drives it. Above roughly 30px the background reads as pure colour; below 12px the effect stops registering as glass.
Add a third field
Copy a .field block. The card has no fixed height, so it grows and stays centred without touching the layout.
Wire it to a real endpoint
The form is markup only. Add an action and method, or a submit handler. The inputs already carry name and autocomplete attributes.
Frequently asked questions
Why does the glass effect look flat in my browser?
The frosted look comes from backdrop-filter, which only shows when there is something behind it. The card has to sit over a blurred image or a gradient, not a flat colour.
Does the form actually log anyone in?
No. It is front-end only. The submit handler is a placeholder, so you would post the values to your own endpoint.
Are the input icons an icon font?
No. They are inline SVG, so there is nothing extra to download and you can recolour them with currentColor.
Which AI tools does this prompt work with?
Any coding model. It is tuned for Claude, Cursor, Codex and v0, and works the same in ChatGPT.
Does backdrop-filter hurt performance?
It forces a compositing pass on the area behind the element. One card is fine. A page of twenty frosted panels is where it starts to cost frames on lower-end devices.
Why not use a background image?
The blurred orbs are three divs. They recolour with one token, weigh nothing, and never load late or fail.