Glassmorphism-Generator

Glaskarten mit Unschärfe und Verläufen gestalten, mit Live-Vorschau und Code für CSS oder Tailwind.

Karten-Eigenschaften

Hintergrundunschärfe: 10px

Hintergrunddeckkraft: 7%

Rahmendeckkraft: 30%

Eckenradius: 20px

Rahmenbreite: 1px

Innere Glühdeckkraft: 5%

Hintergrundfarbe

Rahmenfarbe

Inhalte der Kartenelemente

Glaskarte

Eine premium interaktive Komponente mit subtiler Brechung und Rahmenakzenten.

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

So funktioniert es

Stelle Unschärfe, Glanzlichter, inneres Leuchten und Hintergrund für eine Glassmorphismus-Karte ein.
In der Live-Vorschau siehst du, wie sich die Karte beim Einstellen verändert.
Passe den Effekt an dein Design an.
Kopiere sauberes HTML, CSS oder eine Tailwind-Konfiguration.

Wofür man es nutzt

Eine Karte im Milchglas-Look für eine moderne Oberfläche bauen.
CSS für einen Glassmorphismus-Effekt bekommen, das du direkt einsetzen kannst.
Eine Glas-Komponente für Tailwind exportieren.

Gut zu wissen

Der Glas-Look braucht backdrop-filter und einen lebendigen Hintergrund dahinter. Über einer einfarbigen Fläche ist der Effekt kaum zu sehen.
Die Unterstützung für backdrop-filter ist uneinheitlich. Teste in den Browsern, die du brauchst, und plane einen Ersatz ein.

Häufige Fragen

Was kann ich kopieren?

Sauberes HTML, einfaches CSS oder eine Tailwind-Konfiguration, je nachdem, was zu deinem Stack passt.

Warum wirkt das Glas auf meiner Seite flach?

Glassmorphismus braucht sichtbaren Inhalt dahinter, den er unscharf machen kann. Über einem einfarbigen Hintergrund gibt es nichts zu verwischen. Lege die Karte deshalb über ein Bild oder einen Verlauf.

Wird etwas hochgeladen?

Nein. Der Builder läuft komplett in deinem Browser.

Glassmorphism-Generator

Karten-Eigenschaften

Inhalte der Kartenelemente

Glaskarte

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Was kann ich kopieren?

Warum wirkt das Glas auf meiner Seite flach?

Wird etwas hochgeladen?

Verwandte Tools

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Was kann ich kopieren?

Warum wirkt das Glas auf meiner Seite flach?

Wird etwas hochgeladen?