Login Page V04

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A frosted-glass sign-in card for a made-up colour library app, floating over a bright paint-swirl photo with a short brand message beside it. The glass uses backdrop-filter with a solid purple card as the fallback, and also when the visitor asks for reduced transparency. The form has email, password with a show/hide toggle, remember me and three icon-only social buttons.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 323 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• backdrop-filter glass with @supports and prefers-reduced-transparency fallbacks
• Solid background colour behind the photo if the image fails
• Icon-only social buttons with accessible names
• Show/hide password toggle with aria-pressed
• High-contrast error pills that stay legible on glass
• Success state greets the user and takes focus