Zum Inhalt springen
FreeKitX

CSS Glassmorphism- und Schatten-Generator - FreeKitX

Tool als Lesezeichen speichern

Diese Seite im Browser speichern

Auf dem Smartphone im Teilen-Menü oder Browsermenü „Lesezeichen hinzufügen“ wählen.

Entwerfen Sie moderne Milchglaseffekte, mehrlagige Schatten und kopieren Sie fertigen CSS-Code direkt im Browser.

CSS Glassmorphism- und Schatten-Generator

Kostenlos · Lokale Verarbeitung

Entwerfen Sie moderne Milchglaseffekte, mehrlagige Schatten und Textschatten mit Echtzeit-Vorschau und exportieren Sie produktionsreifen CSS-Code.

Design-Vorlagen

5

Glassmorphism-Parameter

16 px
px

Steuert die Stärke der Unschärfe hinter der Oberfläche.

25 %
%

Steuert die Transparenz des erzeugten Oberflächenhintergrunds.

#ffffff

Legt die Grundfarbe der durchscheinenden Oberfläche fest.

1 px
px

Legt die Stärke des Oberflächenrahmens fest.

30 %
%

Steuert die Sichtbarkeit des Oberflächenrahmens.

#ffffff

Legt die Farbe des Oberflächenrahmens fest.

16 px
px

Rundet die Ecken der erzeugten Oberfläche ab.

Interaktive Live-Vorschau
Echtzeit-Rendering

Echtzeit-Rendering: Glassmorphism · Gesamtebenen: 1

Hintergrund

Generierter CSS-Code

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

Ähnliche Tools

Direkte Antwort

Dieser CSS-Generator berechnet semi-transparente Glaseffekte durch die Kombination von backdrop-filter: blur(), transluzenten Alpha-Farben, Border-Highlights und weichen Box-Shadows.

So verwenden Sie dieses Tool

1

Unschärfe und Transparenz justieren

Regeln Sie den Hintergrund-Blur-Wert und die Deckkraft der Glasfläche.

2

Rahmen und Lichtkanten konfigurieren

Fügen Sie dezente weiße Innen- oder Außenkanten für den typischen Lichtbrechungseffekt hinzu.

3

Mehrlagige Schatten abstimmen

Justieren Sie Schattenwurf und Kontrast gegen unterschiedliche Testhintergründe.

4

CSS-Code exportieren

Kopieren Sie die fertigen CSS-Regeln inklusive Browser-Präfixen direkt in Ihre Zwischenablage.

CSS-Backdrop-Filter und Layer-Komposition

Der Glaseffekt basiert auf der GPU-beschleunigten Filterung des Bildschirminhalts hinter dem betroffenen DOM-Element. Ergänzt durch subtile Grenzverläufe entsteht die Illusion geschliffenen Acrylglases.

backdrop-filter: blur(16px) saturate(180%); background: rgba(255, 255, 255, 0.25);
  • Backdrop-Filter erfordert einen transparenten oder halbtransparenten Hintergrund auf dem Element.
  • Eine leichte Sättigungserhöhung (saturate) intensiviert die Farbwirkung des unscharfen Hintergrunds.

Praktische Beispiele

Glas-Karte für ein modernes Dashboard

Eingabe: Unschärfe: 12px, Hintergrund: rgba(255, 255, 255, 0.2), Rahmen: 1px solid rgba(255, 255, 255, 0.3)

Ausgabe: Valides CSS mit backdrop-filter, -webkit-backdrop-filter und abgestimmter Schattenhierarchie

Erzeugt ein schwebendes, transparentes UI-Karten-Design mit natürlicher Tiefenwirkung.

Einschränkungen

  • Ältere Browserversionen oder Energiesparmodi unterstützen backdrop-filter unter Umständen nur eingeschränkt.
  • Auf rein einfarbigen Hintergründen ohne Textur oder Bildmuster ist der Unschärfe-Effekt optisch nicht wahrnehmbar.

Häufige Fragen

Warum benötigt Glassmorphismus die Eigenschaft -webkit-backdrop-filter?

Webkit-basierte Browser wie Safari auf macOS und iOS erfordern für die korrekte Hardware-Beschleunigung nach wie vor das Hersteller-Präfix.

Beeinträchtigt starker Blur die Rendering-Performance der Website?

Sehr große Unschärferadien auf großflächigen Elementen können die GPU-Last bei Scrollvorgängen leicht erhöhen; moderate Werte zwischen 8px und 20px sind optimal.

Maßgebliche Referenzen & Standards