Glassmorphism is a free UI kit of eight sets of frosted glass components, designed and maintained in-house by uiCookies. Instead of one-off glass effects, it is one design language: every set starts with the same block of design tokens for the background scene and the glass (tint, opacity, blur, border, edge, highlight, shadow, ink and accent colours), so buttons, forms, cards, navigation, overlays and widgets all look like they belong together. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 with the tokens fed into Bootstrap’s own component variables, and Tailwind CSS 4 with the tokens mapped to theme utilities such as bg-glass and backdrop-blur-glass. The sets cover buttons and switches, form controls with a login card, cards, navigation, modals and toasts, media widgets, a dark scene and a full dashboard that switches between light and dark scenes with :has().
Need a background for your glass? The CSS gradient generator builds mesh-style linear, radial and conic gradients and gives you the code in CSS, Tailwind 4 and Bootstrap 5.
The hard part of glassmorphism is not the blur, it is readability. A glass panel is only as legible as the brightest or darkest thing that can drift behind it, so text that passes over a pale background can fail as soon as a saturated orb slides underneath. A good glass component uses enough tint that text stays at 4.5:1 against the worst spot of the scene, gives controls a real edge so their boundary keeps 3:1 whatever colour is behind them, and never relies on the blur alone. It also degrades well: without backdrop-filter, or when someone asks for reduced transparency, the glass should turn nearly solid instead of becoming see-through; with prefers-contrast: more the borders should turn solid; and any animated background should stop for people who prefer reduced motion. Every set in this kit was measured that way, text and control edges against each of the scene colours.
Free download Browse live demos All snippets
The sets
1. Glassmorphism Buttons & Toggles
Frosted, accent, quiet, icon, small, large and disabled glass buttons, round icon buttons, a settings list of switches and two segmented controls.
Use them as the base controls of a glass interface. Switches are checkboxes with role="switch", segmented controls are radio groups, and every control has a dark edge that keeps a 3:1 boundary over any orb.
Live Demo CSS, Bootstrap & Tailwind code
2. Glassmorphism Form Controls
Text, email, search and select fields, checkbox and radio groups, a range slider and a complete glass login card with a passkey option.
Fields turn more opaque on focus so typing never happens over a busy background, and the Bootstrap version maps the tokens onto .form-control, .form-select, .form-check-input and .form-range.
Live Demo CSS, Bootstrap & Tailwind code
3. Glassmorphism Cards
A content card with cover art, a stat tile with a sparkline, a profile card and a pricing card, side by side on the glass scene.
Use them when cards need to match each other and the rest of the kit. Chips, avatars and buttons share the same tokens, and small text uses a darker ink so it stays readable on frosted glass.
Live Demo CSS, Bootstrap & Tailwind code
4. Glassmorphism Navigation
A glass navbar, a tab bar, a workspace sidebar, a breadcrumb and pagination, each with the current item marked.
Everything is plain links with aria-current and a visible indicator, so nothing needs JavaScript. The Bootstrap version uses .navbar, .nav-pills, .breadcrumb and .pagination recoloured through their variables.
Live Demo CSS, Bootstrap & Tailwind code
5. Glassmorphism Modals and Toasts
A modal dialog, success, error and info toasts, an inline alert, tooltips and a dropdown menu, all on the stronger overlay tint.
The dialog is a native dialog opened with showModal(), the menu is a details element, and about a dozen lines of JavaScript handle opening the dialog, dismissing toasts and closing tooltips with Escape.
Live Demo CSS, Bootstrap & Tailwind code
6. Glassmorphism Widgets
A mini music player, a weather widget with an hourly strip, a mini calendar with events and two progress rings.
These are the classic glassmorphism showcase pieces, built so the values are real text: the calendar is a table, the slider has an aria-valuetext, and the rings print their percentages.
Live Demo CSS, Bootstrap & Tailwind code
7. Dark Glassmorphism Components
The core components on the dark scene: buttons, switches, fields, a stat tile, tabs, pagination and a toast.
One attribute, data-scene="dark", swaps every token. The dark values use a pale accent with dark text and lighter edges, because dark glass over a bright orb is where most glass designs lose contrast.
Live Demo CSS, Bootstrap & Tailwind code
8. Glassmorphism Dashboard
A full glass dashboard with a sidebar, a top bar with search, KPI tiles, a bar chart, a sprint ring and an activity feed.
A switch in the top bar turns the whole scene dark using :has() and the shared tokens, with no JavaScript. Use it as a starting layout or as a reference for combining the kit’s components.
Live Demo CSS, Bootstrap & Tailwind code
Frequently asked questions
Is this glassmorphism UI kit free for commercial projects?
Yes. Every set is free for personal and commercial projects, including client work and products you sell. Attribution is optional but always welcome. The licence is at uicookies.com/license/.
Does the glassmorphism kit need JavaScript?
Only the overlays set does, with about a dozen lines of vanilla JavaScript to open the dialog as a modal, dismiss toasts and close tooltips and the menu with Escape. Everything else, including the dashboard’s light and dark scene switch, is HTML and CSS. The Bootstrap versions do not load Bootstrap’s JavaScript bundle.
Is glassmorphism accessible?
It can be, if the glass is tinted enough. In this kit every text run was measured at 4.5:1 and every control edge at 3:1 against each colour in the background scene, not just the average. Without backdrop-filter or under prefers-reduced-transparency the glass turns nearly opaque, prefers-contrast: more makes the borders solid, focus shows a 3px outline, and the moving background stops under prefers-reduced-motion.
Which frameworks are included?
Every set has three files that look the same: plain HTML and CSS, Bootstrap 5.3.8 and Tailwind CSS 4. The Bootstrap files feed the glass tokens into Bootstrap’s own variables for .btn, .card, .form-control, .form-switch, .nav-pills, .pagination, .toast, .alert, .tooltip and .dropdown-menu. The Tailwind files map the same tokens to theme utilities such as bg-glass, border-glass-edge and backdrop-blur-glass.
How do I make a frosted glass effect in CSS?
Give an element a semi-transparent background, such as rgb(255 255 255 / .6), and add backdrop-filter: blur(18px) with the -webkit- prefix for older Safari. A thin light border and an inset highlight make the edge read as glass. Put something colourful behind it, and add an @supports not (backdrop-filter: blur(1px)) rule that makes the background nearly opaque for browsers that cannot blur.
