Selbststarter

Glass Effect Generator (Glassmorphism)

CSS Glaseffekt mit Live-Vorschau erstellen – Backdrop-Filter, Transparenz und Blur einstellen, Code zum Kopieren.

Quick-Presets

px
px

Glasfarbe

Vorschau-Hintergrund

Vorschau

Glass Effect Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);

Das Wichtigste auf einen Blick

  • Glassmorphism erzeugt glasähnliche Optik durch Transparenz, Unschärfe und Lichtkante.
  • Kernzutaten: backdrop-filter: blur(), rgba()-Hintergrund, dezenter Border.
  • Webkit-Prefix (-webkit-backdrop-filter) ist für Safari erforderlich.
  • Effekt nur sichtbar über farbigem Hintergrund oder Bild – nicht auf Weiß.
  • Output als Vanilla CSS oder Tailwind CSS Klassen verfügbar.

Glassmorphism ist ein moderner Designtrend, der eine glasähnliche Optik erzeugt: halbtransparente Flächen, eine sanfte Hintergrund-Unschärfe und eine feine Lichtkante simulieren echtes Milchglas im Interface. Genutzt wird der Effekt überall dort, wo Tiefe und Eleganz gefragt sind – von iOS-Cards und dem macOS Big Sur Dock über die Mica-Materialien in Windows 11 bis hin zu modernen Web-Apps, Landing Pages und Dashboards. Der Begriff wurde 2020 von Michal Malewicz (Hype4.Academy) geprägt und hat sich seither als feste Größe neben Trends wie Neumorphism und Skeuomorphism etabliert.

Was unser Glass Effect Generator besonders macht: Du siehst den Effekt in einer wechselbaren Hintergrund-Vorschau – über Foto, Gradient oder Pattern – statt nur auf einer grauen Fläche. Mit Quick-Presets für die gängigsten Stile (iOS Card, Windows Mica, Bold, Subtle, Dark) bist du in einem Klick startklar, kannst aber jeden Wert per Slider feinjustieren. Der Output kommt als sauberes Vanilla-CSS oder als kompakter Tailwind-CSS-Klassenstring – inklusive Webkit-Prefix für Safari und kurzen deutschen Erklärungen, damit du Browser-Kompatibilität direkt im Tool verstehst.

Hintergrund & Anwendungen

Was ist Glassmorphism?

  • Definition: Designtrend mit milchglasähnlicher Optik durch Backdrop-Blur und Transparenz.
  • Geprägt 2020: Begriff stammt von Michal Malewicz (Hype4.Academy), seither weltweit verbreitet.
  • Verwandte Trends: Neumorphism (Schatten-basiert), Skeuomorphism (3D-realistisch).
  • Bekannte Beispiele: iOS Control Center, macOS Big Sur, Windows 11 Mica, Apple Vision Pro.

Die Kern-Eigenschaften

  • backdrop-filter: blur(): Erzeugt die Hintergrund-Unschärfe (typisch 5–30px).
  • background: rgba(): Halbtransparente Glasfarbe (meist Weiß oder Schwarz mit 10–30% Deckkraft).
  • border: Subtile Lichtkante zur Glasreflexion (1px, helle Farbe mit 20–30% Deckkraft).
  • border-radius: Abgerundete Ecken für moderne Anmutung (8–24px).

Browser-Kompatibilität

  • Chrome/Edge: Voll unterstützt seit Version 76 (2019).
  • Safari: Funktioniert mit -webkit-backdrop-filter Prefix.
  • Firefox: Voll unterstützt seit Version 103 (2022).
  • Mobile: iOS Safari ab 9, Chrome Android ab 76 – heute kein Problem mehr.

Häufige Fehler

  • Auf weißem Hintergrund: Effekt unsichtbar – braucht Farbe oder Bild dahinter.
  • Webkit-Prefix vergessen: Funktioniert nicht in älteren Safari-Versionen.
  • Zu starker Blur: Über 30px wirkt unprofessionell, verschwommen statt elegant.
  • Kein Border: Ohne Lichtkante wirkt der Effekt flach, nicht dreidimensional.

Wie der Glass Effect funktioniert

Glassmorphism kombiniert vier CSS-Eigenschaften zu einem zusammenhängenden Effekt.

  1. 1backdrop-filter: blur(X) – verschwimmt was hinter dem Element liegt.
  2. 2background: rgba(R, G, B, A) – halbtransparente Glasfarbe darüber.
  3. 3border: 1px solid rgba() – subtile Lichtkante simuliert Glasreflexion.
  4. 4border-radius: Xpx – abgerundete Ecken für moderne Optik.
  5. 5Webkit-Prefix für Safari – -webkit-backdrop-filter zusätzlich angeben.
  6. 6Element muss über farbigem Hintergrund liegen – sonst kein Effekt sichtbar.

Glass-Effect-Parameter im Vergleich

Typische Werte-Kombinationen für verschiedene Stile.

StilBlurTransparenzBorderEinsatz
iOS Card20px0.2 weiß0.3 weißApp-Cards, dezente Übersichten
Windows 11 Mica30px0.4 weiß0.2 weißSidebar, Header-Bereiche
Bold Glass40px0.3 weiß0.5 weißHero-Sections, Showcase
Subtle Glass8px0.1 weiß0.15 weißCards auf Pattern-Background
Dark Glass20px0.2 schwarz0.1 weißDark-Mode-Designs

Häufig gestellte Fragen

Anleitung

  1. 1

    Hintergrund wählen

    Wähle einen Hintergrund-Vorschau (Foto, Gradient, Pattern), um den Effekt realistisch zu sehen. Auf Weiß bleibt Glassmorphism unsichtbar.

  2. 2

    Preset oder eigene Werte

    Klick auf einen Quick-Preset (iOS, Mica, Bold, Subtle, Dark) oder stelle die Slider individuell ein – Blur, Transparenz, Rahmen-Deckkraft, Eckenradius.

  3. 3

    Live-Vorschau prüfen

    Die Glas-Karte aktualisiert sich beim Ziehen der Slider. Wechsel Hintergründe, um zu sehen, wie der Effekt auf verschiedenen Untergründen wirkt.

  4. 4

    Code kopieren

    Wähle Vanilla CSS oder Tailwind und kopiere den Code mit einem Klick in die Zwischenablage – inklusive Webkit-Prefix für Safari.

Über Selbststarter

Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.

  • #css
  • #design
  • #glassmorphism
  • #frontend
  • #ui-design