Glassmorphism UI Kit — Glass Cards, Navbar, Forms, Modals & Toasts (HTML/CSS/JS)

Glassmorphism UI Kit — Frosted-Glass Components for Modern Websites

Beautiful frosted-glass cards, navbar, forms, modals and toasts in pure HTML, CSS and JavaScript. No frameworks, no build step, no dependencies — copy a component, paste it into your project, and it just works on any colourful background.

Features

• 14 ready glass components — glass cards, pill navbar, buttons, inputs, badges, avatar stack, toggle switch, modal and toast, all in one reusable stylesheet.
• Zero dependencies — pure HTML/CSS/JS. No frameworks, no build step, no npm install; two files and it works.
• Live background switcher — Sunset, Ocean and Forest themes included, so you can see every glass panel adapt to a new backdrop instantly.
• Working modal + toast system — open/close modal with Escape key and backdrop click, plus a bottom toast notification, wired with clean vanilla JavaScript.
• Validated glass form — name + email form with inline error and success states, ready to drop into any landing page.
• Fully responsive — glass panels reflow cleanly from desktop to small phones, with a mobile-first layout.

What's Inside

index.html — live showcase page (open it in a browser) · components.css — the complete kit · components.js — modal, toast, background switcher and demo forms · README.txt — setup and usage guide with copy-paste examples.

How to Use

1. Unzip the file. 2. Open index.html to see every component live. 3. Copy components.css and components.js into your project, link them in your page, and use any class — for example <div class="glass-card"> for a frosted card. Full examples are in README.txt.

Requirements

Any modern browser (Chrome, Firefox, Safari, Edge). Glass needs a colourful background behind it to shine — a gradient or photo works best.

Need a Custom Website or Mobile App?

Downloading free code is just the start. Yadu Tech builds complete websites and mobile apps for businesses — design, development, deployment, all done for you.

👉 Chat on WhatsApp