Zum Tool springen
JoeLucky

Auf ★ klicken, um ein Tool zu speichern

Tool-Kategorien

Code zu BildCSS-VerlaufsgeneratorGlassmorphism-GeneratorBox-Shadow-GeneratorCSS-LadeanimationenSVG-Blob-GeneratorSVG zu PNGFarbkontrast-PrüferPX/REM/EM-Umrechner
JoeLucky

Praktische Online-Tools an einem Ort

DatenschutzerklärungNutzungsbedingungen

© 2026 JoeLucky®. Alle Rechte vorbehalten.

  1. JoeLucky
  2. /CSS & Design
  3. /Glassmorphism-Generator

Glassmorphism-Generator

Glassmorphism-Effekt in Echtzeit ansehen und den CSS-Code mit einem Klick kopieren

Effekteinstellungen

#FFFFFF
Hintergrunddeckkraft15%
Hintergrundunschärfe10px
Sättigung180%
Randdeckkraft30%
Eckenradius16px
Schattendeckkraft10%
Vorschau-Hintergrund
Live-Vorschau
CSS
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 Tipps

  • Beste Ergebnisse: Deckkraft 10–25 %, Unschärfe 5–15 px
  • Das Präfix -webkit-backdrop-filter für die Safari-Kompatibilität ist enthalten
  • Wirkt der Effekt blass, stellen Sie sicher, dass das übergeordnete Element einen farbigen Hintergrund hat
  • Eine Sättigung von 180 % hält die Farben hinter dem Glas lebendig

Ähnliche Tools: CSS & DESIGN

Alle anzeigen
Code zu Bild

Code-Snippets in ansprechende Screenshots verwandeln, mit mehreren Farbschemata

Öffnen →
CSS-Verlaufsgenerator

Lineare, radiale und konische Verläufe visuell gestalten und das CSS sofort kopieren

Öffnen →
Box-Shadow-Generator

💬 Kommentare

?

Noch keine Kommentare. Schreiben Sie den ersten!

Was ist Glassmorphism-Generator?

Passen Sie Deckkraft, Unschärfe, Sättigung und Rand an, um eine Milchglas-Karte (Glassmorphism) in Echtzeit zu prüfen, und kopieren Sie anschließend das CSS samt backdrop-filter.

Anleitung

  1. Im linken Bereich gibt es 7 Bedienelemente: Deckkraft, Unschärfe, Sättigung, Randdeckkraft, Eckenradius, Schatten und Farbauswahl – alle aktualisieren die Vorschaukarte sofort.
  2. Beste Ergebnisse: Deckkraft 10–25 % und Unschärfe 5–15 px. Diese beiden Parameter haben den größten Einfluss auf die Milchglas-Optik.
  3. Erhöhen Sie die Sättigung auf 180 %, damit die Farben hinter dem Glas lebendig wirken; die Randdeckkraft verleiht der Karte einen dezenten Highlight-Rand.
  4. Klicken Sie auf die 6 Hintergrundfelder darunter (Purple, Ocean, Sunset usw.), um die Vorschauszene zu wechseln und den Effekt auf verschiedenen Hintergründen zu prüfen.
  5. Mit „CSS kopieren“ erhalten Sie den vollständigen CSS-Code; backdrop-filter und -webkit-backdrop-filter (Safari-kompatibel) sind automatisch enthalten und können direkt ins Projekt eingefügt werden.

Häufig gestellte Fragen

Wie wird der Glassmorphism-Effekt erzielt?

Mit backdrop-filter: blur() für die Hintergrundunschärfe, einer halbtransparenten background-color und einem dezenten Rand.

Wird es in allen Browsern unterstützt?

In Chrome, Edge und Safari wird es gut unterstützt. Firefox benötigt ein experimentelles Flag. Zur Sicherheit sollten Sie das Präfix -webkit- hinzufügen.

Kann ich die Vorschau in Echtzeit sehen?

Ja. Jede Änderung an Schiebereglern oder Farben aktualisiert die Vorschau sofort.

Schatteneffekte interaktiv anpassen und die CSS-Ausgabe in Echtzeit ansehen

Öffnen →