Glassmorphism-Container mit Blur & Tiefenwirkung
Dieses CSS-Snippet erzeugt einen modernen Glassmorphism-Effekt für Container-Elemente. Durch transparente Flächen, Weichzeichner (Blur) und gezielte Licht- sowie Schatteneffekte entsteht eine glasähnliche Oberfläche mit räumlicher Tiefe – ideal für Overlays, Karten, Modals oder Hero-Boxen.
Erklärung des Codes:
.glass-container{
background: rgba(255,255,255,0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 16px;
box-shadow:
0 12px 40px rgba(0,0,0,0.22),
inset 0 1px 1px rgba(255,255,255,0.35);
}
Was passiert hier technisch:
-
background: rgba(255,255,255,0.12);
Halbtransparenter weißer Hintergrund (12 % Deckkraft).
Wichtig für den Glas-Look. -
backdrop-filter: blur(12px);
Weichzeichnet den Hintergrund hinter dem Element. Das ist der Kern des Glassmorphism-Effekts. -
-webkit-backdrop-filter: blur(12px);
Safari-Kompatibilität. -
border: 1px solid rgba(255,255,255,0.25);
Dezente helle Kante für Lichtreflex-Effekt. -
border-radius: 16px;
Abgerundete Ecken für modernes UI-Design. -
box-shadow:
→ 0 12px 40px rgba(0,0,0,0.22) → weicher Außenschatten für Tiefe
→ inset 0 1px 1px rgba(255,255,255,0.35)→ innere Lichtkante für realistischere Glaswirkung
Code anwenden
Zuerst erstellt ihr in Elementor die gewünschte Container-Struktur. Dazu fügt ihr einen neuen Container ein und platziert darin euren Inhalt, zum Beispiel eine Überschrift oder Text. Anschließend klickt ihr den Container an, öffnet den Tab „Erweitert“ und scrollt nach unten zum Bereich „Individuelles CSS“. Dort fügt ihr den kompletten CSS-Code für den Glass-Effekt ein.
Im zweiten Schritt bleibt ihr weiterhin im selben Container unter „Erweitert“. Etwas weiter oben befindet sich das Feld „CSS-Klassen“. Hier tragt ihr zusätzlich den Namen glass-container ein. Wichtig ist, dass ihr die Klasse ohne Punkt und ohne Sonderzeichen eingebt. Nachdem ihr gespeichert habt, wird der Glas-Effekt auf diesen Container angewendet.
Wichtig zu verstehen ist, dass diese Methode lokal auf genau dieser Seite arbeitet. Das bedeutet, der CSS-Code liegt innerhalb des Containers dieser einen Seite und steht auf anderen Seiten nicht automatisch zur Verfügung. Wenn der Effekt auf mehreren oder auf allen Seiten verwendet werden soll, muss der CSS-Code global hinterlegt werden, zum Beispiel unter „Website-Einstellungen → Benutzerdefiniertes CSS“. In diesem Fall wird der Code nur einmal global gespeichert und auf den einzelnen Containern wird anschließend lediglich die CSS-Klasse glass-container eingetragen.
Hinweis:
Der Blur-Effekt funktioniert nur, wenn sich hinter dem Element sichtbarer Inhalt (z. B. Bild oder Farbverlauf) befindet. Auf einfarbigem Hintergrund wirkt er kaum.
Einsatzbereiche
- Elementor Container / Section
- Cards in Produktgrids
- Floating Panels
- Sticky UI-Elemente
- Overlay-Menüs