Glassmorphism UI Kit

28 frosted-glass components — translucent buttons, cards, alerts, inputs and modals — built with Tailwind's backdrop-blur and white-alpha backgrounds.

28 components · live preview · copy as HTML or JSX · free for commercial use

Glassmorphism buttons

Primary Button

Glassmorphism · Buttons

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <button class="bg-white/20 backdrop-blur-md text-white rounded-xl px-4 py-2 text-sm font-bold hover:bg-white/30 shadow-lg transition-all">
  Primary Button
</button>
</div>

Outline Button

Glassmorphism · Buttons

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <button class="bg-transparent text-white border border-white/30 rounded-xl px-4 py-2 text-sm font-semibold transition-colors">
  Outline Button
</button>
</div>

Icon Button

Glassmorphism · Buttons

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <button class="w-10 h-10 flex items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white shadow-lg transition-colors" aria-label="Settings">
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
</button>
</div>

Accent Button

Glassmorphism · Buttons

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <button class="bg-white/20 backdrop-blur-md text-white rounded-full px-5 py-2.5 text-sm font-bold shadow-lg transition-all">
  Get Started
</button>
</div>

Glassmorphism badges

Status Pill

Glassmorphism · Badges

Active

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <span class="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-md text-white rounded-full px-2.5 py-1 text-xs font-bold">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>
</div>

Notification Badge

Glassmorphism · Badges

🔔 3

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <span class="relative inline-flex">
  <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white/80">🔔</span>
  <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-white/20 backdrop-blur-md text-white text-[10px] font-bold">3</span>
</span>
</div>

Glassmorphism cards

Basic Card

Glassmorphism · Cards

Card Title

A short description of this card's content goes here.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-5 shadow-lg">
  <h3 class="text-sm font-bold text-white mb-1">Card Title</h3>
  <p class="text-xs text-white/80">A short description of this card's content goes here.</p>
</div>
</div>

Profile Card

Glassmorphism · Cards

Jane Doe

Product Designer

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-5 shadow-lg flex items-center gap-4">
  <div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center text-white text-sm font-bold">JD</div>
  <div>
    <p class="text-sm font-bold text-white">Jane Doe</p>
    <p class="text-xs text-white/80">Product Designer</p>
  </div>
</div>
</div>

Pricing Card

Glassmorphism · Cards

Pro

$19/mo

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-6 shadow-lg">
  <p class="text-xs font-bold text-white uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-bold text-white mb-4">$19<span class="text-sm text-white/80">/mo</span></p>
  <button class="w-full bg-white/20 backdrop-blur-md text-white rounded-xl px-4 py-2 text-sm font-bold hover:bg-white/30 transition-all">
    Choose Plan
  </button>
</div>
</div>

Glassmorphism alerts

Info Alert

Glassmorphism · Alerts

ℹ️ This is an informational message.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-3 text-xs text-white shadow-lg">
  ℹ️ This is an informational message.
</div>
</div>

Success Alert

Glassmorphism · Alerts

✅ Your changes have been saved.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-3 text-xs text-white shadow-lg">
  ✅ Your changes have been saved.
</div>
</div>

Warning Alert

Glassmorphism · Alerts

⚠️ This action can't be undone.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-3 text-xs text-white shadow-lg">
  ⚠️ This action can't be undone.
</div>
</div>

Error Alert

Glassmorphism · Alerts

⛔ Something went wrong.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-3 text-xs text-white shadow-lg">
  ⛔ Something went wrong.
</div>
</div>

Glassmorphism forms

Text Input

Glassmorphism · Forms

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-xl text-sm bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder:text-white/70 focus:outline-none" />
</div>

Textarea

Glassmorphism · Forms

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-xl text-sm bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder:text-white/70 focus:outline-none"></textarea>
</div>

Select Dropdown

Glassmorphism · Forms

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <select class="w-48 px-3 py-2 rounded-xl text-sm bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder:text-white/70 focus:outline-none">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>
</div>

Checkbox

Glassmorphism · Forms

I agree to the terms

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 rounded text-white" />
  <span class="text-sm text-white">I agree to the terms</span>
</label>
</div>

Toggle Switch

Glassmorphism · Forms

Uses Tailwind's peer/peer-checked variants — no JavaScript required.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 rounded-full bg-white/20 peer-checked:bg-white/50 transition-colors relative">
    <div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
  </div>
</label>
</div>

Glassmorphism feedback

Spinner

Glassmorphism · Feedback

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="w-8 h-8 rounded-full border-4 border-white/30 border-t-white animate-spin"></div>
</div>

Progress Bar

Glassmorphism · Feedback

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="w-48 h-2.5 rounded-full bg-white/20 overflow-hidden">
  <div class="h-full w-2/3 rounded-full bg-white"></div>
</div>
</div>

Skeleton Loader

Glassmorphism · Feedback

Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="w-48 space-y-2">
  <div class="h-4 w-3/4 rounded bg-white/20"></div>
  <div class="h-4 w-1/2 rounded bg-white/20"></div>
</div>
</div>

Toast Notification

Glassmorphism · Feedback

Vanilla JavaScript — no framework required.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <button id="toast-trigger" class="bg-white/20 backdrop-blur-md text-white rounded-xl px-4 py-2 text-sm font-bold hover:bg-white/30 transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-xl bg-white/20 backdrop-blur-md border border-white/30 text-white text-sm font-semibold px-4 py-3 shadow-lg">
  ✅ Saved successfully!
</div>
</div>

Glassmorphism overlays

Accordion / FAQ Item

Glassmorphism · Overlays

Refund policy? ▾

30-day money-back guarantee, no questions asked.

Uses the native <details>/<summary> elements — no JavaScript required.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <details class="w-48 rounded-xl border border-white/30 bg-white/20 backdrop-blur-md p-4 group">
  <summary class="cursor-pointer text-sm font-bold text-white list-none flex items-center justify-between">
    Refund policy?
    <span class="text-white/80 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-white/80 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>
</div>

Modal Dialog

Glassmorphism · Overlays

Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <button id="modal-open" class="bg-white/20 backdrop-blur-md text-white rounded-xl px-4 py-2 text-sm font-bold hover:bg-white/30 transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-xl p-6 w-full max-w-xs bg-white/20 backdrop-blur-md border border-white/30 text-white backdrop:bg-black/50">
  <h3 class="text-sm font-bold mb-2">Confirm action</h3>
  <p class="text-xs text-white/80 mb-4">Are you sure you want to continue?</p>
  <div class="flex gap-2 justify-end">
    <button id="modal-close" class="px-3 py-1.5 rounded-xl text-xs font-semibold text-white/80">Cancel</button>
    <button class="px-3 py-1.5 rounded-xl text-xs font-bold bg-white/20 backdrop-blur-md text-white">Confirm</button>
  </div>
</dialog>
</div>

Tooltip

Glassmorphism · Overlays

Uses Tailwind's group/group-hover variants — no JavaScript required.

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <span class="relative inline-block group">
  <button class="w-8 h-8 flex items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white text-xs font-bold">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-xl bg-white/20 backdrop-blur-md border border-white/30 text-white text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>
</div>

Glassmorphism avatars

Circle Avatar

Glassmorphism · Avatars

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="w-10 h-10 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center text-white text-sm font-bold">AB</div>
</div>

Avatar Group

Glassmorphism · Avatars

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div>
  <div class="w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 border-2 border-white flex items-center justify-center text-white text-xs font-bold">B</div>
  <div class="w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 border-2 border-white flex items-center justify-center text-white text-xs font-bold">C</div>
  <div class="w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 border-2 border-white flex items-center justify-center text-white/80 text-xs font-bold">+5</div>
</div>
</div>

Avatar with Status

Glassmorphism · Avatars

<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
  <div class="relative inline-block">
  <div class="w-10 h-10 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center text-white text-sm font-bold">JS</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>
</div>

What is glassmorphism?

Glassmorphism imitates frosted glass: semi-transparent panels (bg-white/20), a blur of whatever sits behind them (backdrop-blur-md) and a thin, light border that catches the edge (border-white/30). The effect only works over a colorful background, which is why the previews sit on a purple-to-blue gradient.

When to use it

Use glass panels sparingly over vivid gradients, photos or video — hero sections, login screens, media players and widgets. Avoid stacking many glass layers: each backdrop blur costs GPU time, and the result quickly becomes muddy.

Accessibility notes

Contrast is the main risk. White text on a translucent panel can fail WCAG when the background behind it is light or busy, and the contrast changes as that background moves. Raise the panel opacity (bg-white/30 or more) or darken the backdrop until text reaches 4.5:1, and provide a solid fallback for browsers without backdrop-filter support.

← Back to the full UI Component Library

Frequently Asked Questions

How do you make a glassmorphism effect with Tailwind CSS?↓

Combine a semi-transparent background such as bg-white/20, backdrop-blur-md and a subtle border like border border-white/30, then place the element over a colorful gradient or image.

Why does my glass effect look flat?↓

Backdrop blur only shows when there is something colorful behind the element. Put the panel over a gradient, photo or shapes; on a plain white background it just looks like a gray box.

Is glassmorphism bad for accessibility?↓

It can be. Text contrast depends on whatever is behind the glass, so test contrast against the lightest part of the backdrop and raise the panel's opacity if needed.

Last updated: November 7, 2026