Glassmorphism-Generator

Der Glassmorphism-Generator erstellt eine Milchglasfläche mit einstellbarer Unschärfe, Sättigung, Tönung, Rahmen, Eckenradius und Schatten. Kopieren Sie CSS oder Tailwind-Klassen und laden Sie die Vorschau als PNG herunter. Optional erzeugt der Export eine deckende Fläche in der gewählten Tönung, wenn der Browser eine reduzierte Transparenz meldet.

Nur lokal

Vorlagen

Wählen Sie eine Vorlage, um alle Regler auf einmal zu setzen, und passen Sie sie dann an.

Weichzeichnen20pxSättigung180%Bleiben Sie unter etwa 20 px. Darüber zeichnet der Browser bei jedem Scroll-Frame einen neuen Schnappschuss der Seite weich – genau dort verliert eine Milchglas-Leiste auf Mittelklasse-Handys Bilder.Deckkraft der Tönung0.12

Tönungsfarbe

Rahmen1px

Glanzkante

Stärke der Glanzkante0.25Radius24pxSchatten28Ersatz bei reduzierter TransparenzVerwendet die gewählte Tönung deckend, wenn der Browser reduzierte Transparenz meldet. Die Unterstützung hängt von Browser und Betriebssystem ab.

CSS

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

backdrop-filter zeichnet weich, was hinter dem Element liegt – die Seite, ein Bild, eine andere Komponente. Legen Sie in der Vorschau eine Fläche oder einen Verlauf hinter das Glas, um den echten Eindruck zu sehen.

Tailwind-Klassen

rounded-[24px] border-[1px] border-[color:rgb(255_255_255_/_0.25)] bg-[rgb(255_255_255_/_0.12)] backdrop-blur-[20px] backdrop-saturate-[1.80] shadow-[0_8px_32px_rgb(0_0_0_/_0.28)] bg-clip-padding [@media(prefers-reduced-transparency:reduce)]:bg-[rgb(255_255_255_/_1)] [@media(prefers-reduced-transparency:reduce)]:[backdrop-filter:none] [@media(prefers-reduced-transparency:reduce)]:[-webkit-backdrop-filter:none]

Der Export enthält backdrop-filter mit und ohne Präfix für ältere Browser.

Wie funktioniert Glassmorphism-Generator?

Der CSS-Effekt kombiniert `backdrop-filter`, eine halbtransparente Hintergrundfarbe und einen Rahmen. Der Filter zeichnet den sichtbaren Hintergrund hinter dem Element weich und verändert dessen Sättigung. Die Tönung und der Rahmen geben der Fläche ihre eigene Farbe und Kontur.

Der Export enthält `backdrop-filter` und `-webkit-backdrop-filter` für die Kompatibilität mit älteren Browsern. `background-clip: padding-box` verhindert, dass die Tönung unter dem Rahmen gezeichnet wird. Der Effekt braucht einen sichtbaren Hintergrund und eine durchscheinende Fläche.

Die Vorschau bildet den Effekt mit SVG-Filtern auf einem festen Beispielhintergrund nach. Für die Unschärfe entspricht `feGaussianBlur` mit `stdDeviation` dem eingestellten CSS-Wert. Der PNG-Download enthält dieselbe Szene; auf Ihrer Website beeinflusst der tatsächliche Hintergrund das Erscheinungsbild.

Der optionale Block für `prefers-reduced-transparency` ersetzt die Tönung durch ihre deckende Farbe und deaktiviert beide Filterdeklarationen. Die Unterstützung hängt von Browser und Betriebssystem ab. Prüfen Sie den Textkontrast mit und ohne Transparenz sowie die Leistung auf den Zielgeräten.

Einstellungen der Glasfläche

Weichzeichnen 20px
Sättigung 180%
Tönungsfarbe #ffffff
Deckkraft der Tönung 0.12
Radius 24px

Erzeugtes CSS

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

Welche Optionen und Sonderfälle unterstützt Glassmorphism-Generator?

Technische Referenz und Optionen
Parameter	Typ	Standard	Verhalten & Sonderfälle
blur(Xpx)	Länge	20px	Zeichnet den Hintergrund hinter der Fläche weich. Die SVG-Vorschau verwendet denselben Zahlenwert als Gaußsche Standardabweichung.
saturate(X%)	Prozent	180 %	Verändert die Sättigung des Hintergrunds. 100 % lässt sie unverändert, höhere Werte verstärken die Farben.
background-color	RGB mit Alpha	Weiß mit 12 % Deckkraft	Bestimmt Farbe und Deckkraft der Tönung. Mit höherer Deckkraft tritt der Hintergrund weniger deutlich hervor.
border	Breite und Farbe	1px Weiß mit 25 % Deckkraft	Zeichnet die Glanzkante um die Fläche. Breite, Farbe und Deckkraft lassen sich unabhängig einstellen.
background-clip	padding-box	aktiv	Beschränkt die Tönung auf den Innenbereich des Rahmens und verhindert die Überlagerung beider halbtransparenten Flächen.
-webkit-Präfix	zusätzliche Deklaration	aktiv	Der Export enthält die präfixierte und die unpräfixierte Filtereigenschaft für die Kompatibilität mit älteren Browsern.
prefers-reduced-transparency	Medienabfrage	aktiv	Verwendet die gewählte Tönung deckend und deaktiviert die Filter, wenn der Browser reduzierte Transparenz meldet. Die Unterstützung hängt von Browser und Betriebssystem ab.

Häufig gestellte Fragen

Wie erstelle ich einen Milchglas-Effekt mit CSS?

Kombinieren Sie einen halbtransparenten Hintergrund, etwa `background-color: rgb(255 255 255 / 0.12)`, mit `backdrop-filter: blur(20px) saturate(180%)` und einem hellen Rahmen. Der Export ergänzt die präfixierte Filtereigenschaft und `background-clip: padding-box`.

Warum hat `backdrop-filter` auf meiner Seite keinen sichtbaren Effekt?

Prüfen Sie, ob hinter dem Element überhaupt unterschiedliche Farben oder Formen sichtbar sind. Eine deckende Tönung verdeckt den gefilterten Hintergrund. Auch die Ebenenstruktur und die Begrenzung durch übergeordnete Elemente können den Effekt beeinflussen. Die präfixierte Deklaration hilft bei älteren Browsern.

Kann Glassmorphism die Seite verlangsamen?

Ja, vor allem bei großen Flächen über bewegten oder scrollenden Inhalten. Wie aufwendig die Verarbeitung ist, hängt vom Browser und Gerät ab. Beginnen Sie mit einer kleinen Fläche und moderater Unschärfe und prüfen Sie das Scrollen auf den Zielgeräten.

Wozu dient `prefers-reduced-transparency`?

Die Medienabfrage reagiert auf eine vom Browser gemeldete Präferenz für weniger Transparenz. Der optionale Exportblock verwendet die gewählte Tönung ohne Transparenz und schaltet die Filter aus. Die Unterstützung hängt von Browser und Betriebssystem ab; prüfen Sie den Kontrast in beiden Darstellungen.

Entspricht die Vorschau dem kopierten CSS?

Die Vorschau und das PNG verwenden denselben SVG-Beispielhintergrund und dieselben eingestellten Werte. Das CSS filtert dagegen den tatsächlichen Hintergrund Ihrer Website. Die Einstellungen stimmen überein, das Erscheinungsbild hängt aber von den dahinterliegenden Inhalten ab.

Warum wirkt meine Glasfläche grau oder ausgewaschen?

Eine neutrale Tönung über einem gleichmäßigen Hintergrund bietet wenig sichtbare Struktur. Verringern Sie die Deckkraft, wählen Sie eine farbige Tönung oder prüfen Sie den Effekt vor einem abwechslungsreicheren Hintergrund. `background-clip: padding-box` hält die Tönung zudem vom Rahmen fern.

ToolsByUs-Team · Wie wir unsere Tools prüfen