Glassmorphism Generator

Erstellen Sie kostenlos benutzerdefinierte Glassmorphism-Effekte. Passen Sie Unschärfe, Brechung und Tiefe an und kopieren Sie den generierten CSS-Code für Ihre Projekte.

Preview

Einstellungen

9
0.09
9
.glass-card {
  width: 240px;
  height: 360px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 9px rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.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)
  );
}

Was ist Glassmorphism?

Glassmorphism ist ein Design-Trend, der Elemente mit einem transluzenten und unscharfen Glaseffekt erstellt, der ein Gefühl von Tiefe und Modernität schafft. Dieser Effekt ist in modernen Interfaces beliebt und verleiht Ihren Projekten ein elegantes Aussehen.

Glassmorphism-Funktionen

  • Transluzenter Glaseffekt mit Hintergrundunschärfe
  • Subtil und halbtransparente Ränder
  • Schafft Gefühl von Tiefe und Ebenen
  • Ideal für Karten, Modals und moderne Panels
  • Funktioniert gut mit farbigen oder Verlaufs-Hintergründen

Nutzungstipps

  • Passen Sie die Unschärfe an, um die Schärfe des Effekts zu steuern
  • Die Brechung steuert die Transparenz des Elements
  • Die Tiefe passt die Größe des Elements an
  • Verwenden Sie farbige Hintergründe für bessere Visualisierung
  • Kombinieren Sie mit Schatten für mehr Tiefe