Glass-Card-Builder

Glassmorphismus-Karten mit Blur, Verläufen und Live-Vorschau.

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

Justieren Sie Unschärfe, Glanzlichter, innere Leuchteffekte und Hintergrund für eine Glassmorphism-Karte.
Beobachten Sie die Live-Vorschau beim Justieren.
Passen Sie den Effekt an Ihr Design an.
Kopieren Sie sauberes HTML, CSS oder eine Tailwind-Konfiguration.

Wofür man es nutzt

Eine Milchglas-Karte für eine moderne UI erstellen.
Produktionsreifes CSS für einen Glassmorphism-Effekt erhalten.
Eine Tailwind-fertige Glaskomponente exportieren.

Gut zu wissen

Der Glaseffekt beruht auf backdrop-filter und einem unruhigen Hintergrund dahinter — über einer flachen Farbe ist der Effekt dezent.
Die backdrop-filter-Unterstützung variiert; testen Sie in Ihren Zielbrowsern und stellen Sie einen Fallback bereit.

Häufige Fragen

Welche Ausgabe kann ich kopieren?

Sauberes HTML, reines CSS oder eine Tailwind-Konfiguration — je nachdem, was zu Ihrem Stack passt.

Warum wirkt das Glas auf meiner Seite flach?

Glassmorphism benötigt visuellen Inhalt dahinter zum Weichzeichnen. Über einem einfarbigen Hintergrund gibt es nichts zu mattieren, platzieren Sie es daher über einem Bild oder Verlauf.

Wird irgendetwas hochgeladen?

Nein. Der Builder läuft vollständig in Ihrem Browser.

Glass-Card-Builder

Karten-Eigenschaften

Inhalte der Kartenelemente

Glaskarte

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Welche Ausgabe kann ich kopieren?

Warum wirkt das Glas auf meiner Seite flach?

Wird irgendetwas hochgeladen?

Verwandte Tools

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Welche Ausgabe kann ich kopieren?

Warum wirkt das Glas auf meiner Seite flach?

Wird irgendetwas hochgeladen?