Glassmorphism – 8 Free CSS, Bootstrap & Tailwind Sets
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().
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.
