About this set
A login card floating over a full-bleed background, for brands that want a photograph or illustration on the sign-in page. The wrapper paints two layers behind the content: a backdrop, here three coloured radial gradients over a deep blue so the file stays self-contained, and a dark top-to-bottom scrim that keeps white text readable whatever image you swap in. The card itself is translucent navy with an 18px backdrop blur, a thin white border and a large soft shadow. Inside are the email and password fields, a remember-me checkbox with a forgotten-password link, a white Sign in button that lifts slightly on hover, and a create-account link. A caption under the card tells developers how to replace the gradient. Use it for consumer products, events and portfolios where the background carries the brand. To use a photo, set background-image on the ::before layer and keep the ::after scrim. The Bootstrap version uses a translucent .card in dark colour mode; the Tailwind version draws both layers with before: and after: utilities.
What’s included
- Backdrop and scrim as two pseudo-element layers
- Translucent card with an 18px backdrop blur
- Field borders raised to 45% white for a visible edge
- White checkbox and focus outlines that show on dark glass
- Hover lift removed under prefers-reduced-motion
Accessibility
Both fields have visible labels and username and current-password autocomplete tokens; the short Forgot link is named Forgot password. Focus shows a white outline or a white ring, chosen to stand out on the dark card. The scrim keeps text contrast independent of the image, and the button lift and transitions stop under prefers-reduced-motion.
Customise it
Replace the gradient on .lf::before (plain CSS, Bootstrap) or the before:bg-[...] utility (Tailwind) with your image, and tune the scrim alpha on ::after. Card tint and blur are the rgba background and backdrop-filter values on the card.
