Glass Card Builder

Design glassmorphism cards with blur, gradients, and live preview.

Card Properties

Backdrop Blur: 10px

Background Opacity: 7%

Border Opacity: 30%

Border Radius: 20px

Border Width: 1px

Inner Glow Opacity: 5%

Background Tint

Border Tint

Card Elements Content

Glass Card

A premium interactive component with subtle refraction and border highlights.

.glass-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #ffffff;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

How it works

Adjust blur, highlights, inset glows, and background for a glassmorphism card.
Watch the live preview update as you tune.
Match the effect to your design.
Copy clean HTML, CSS, or a Tailwind config.

What people use it for

Building a frosted-glass card for a modern UI.
Getting production CSS for a glassmorphism effect.
Exporting a Tailwind-ready glass component.

Good to know

The glass look relies on backdrop-filter and a busy background behind it. Over a flat color the effect is subtle.
backdrop-filter support varies; test in your target browsers and provide a fallback.

Frequently asked questions

What output can I copy?

Clean HTML, plain CSS, or a Tailwind config, whichever matches your stack.

Why does the glass look flat in my page?

Glassmorphism needs visual content behind it to blur. Over a solid background there is nothing to frost, so place it over an image or gradient.

Is anything uploaded?

No. The builder runs entirely in your browser.

Related tools

DXF Viewer

Color Palette

Color Converter

CSS Box Shadow Generator

Contrast Checker