Tools

Glassmorphism Generator

Online glassmorphism generator tool by 4TBOX.

AI-style glass helper

Describe un estilo (ej. neon dashboard, minimal white) y ajustamos automáticamente el blur, borde y sombras.

Glass presets

Background scene

Preview

Snapshot

Perfecto para cards, modales y paneles de dashboards.

Glass card18px blur · soft border · shadow 45%

Button

Card

Glass dashboard card

Ideal como panel de métricas o bloque de información encima de un fondo con gradient o imagen.

Modal

Glass modal

Úsalo como dialog o visor rápido encima de tu app o dashboard.

Color & opacity

Background color

Opacity18%

Blur18px

Radius18px

Border color

Border opacity45%

Shadow45%

Highlight50%

/* Container background */
.container {
  background: radial-gradient(circle at top left, #0f172a 0%, #020617 50%, #020617 100%);
  padding: 24px;
}

/* Glass card */
.glass-card {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 18px;
  padding: 16px 20px;
  border: 1px solid rgba(229, 231, 235, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.45);
  position: relative;
  overflow: hidden;
}

/* Optional highlight */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(255, 255, 255, 0) 45%
  );
  opacity: 0.25;
  pointer-events: none;
}

How to use this glass card?

Copia el snippet de CSS o Tailwind y aplícalo a un div dentro de un fondo oscuro. Funciona genial para paneles de dashboards, tarjetas de pricing o overlays encima de imágenes.