Zum Inhalt springen
TextArray1.87.0
100% lokal

Glassmorphismus-CSS-Generator

Erstellen Sie CSS für mattierte Glaspanels oder weiches neumorphes Design ganz einfach mit Schiebereglern – keine Codierung erforderlich.

20
12
30
20
40
16
Ausgabe
Verwandte Tools
CSS box-shadow-GeneratorEntwickler-Tools
CSS-Farbverlauf-GeneratorEntwickler-Tools
FarbkonverterEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
Glassmorphismus-CSS-Generator
Erstellen Sie eine vollständige, sofort einsatzfähige CSS-Regel für ein mattiertes Glaspanel oder eine weiche neumorphe Oberfläche, ohne irgendwelche Werte manuell einzugeben. Wählen Sie Glassmorphismus für eine durchscheinende Karte, die alles verschwimmt, was dahinter liegt – der Stil, der in modernen Dashboards, Anmeldeseiten und Modalen verwendet wird – oder Neumorphismus für eine Oberfläche, die aus dem gleichen Material wie ihr Hintergrund geformt zu sein scheint, mit einem Paar gegenüberliegender weicher Schatten statt Transparenz.
Die Optionen werden direkt den Eigenschaften zugeordnet, die das Tool schreibt. Im Glaskies wird die Oberflächendeckung und Unschärfestärke die Hintergrund-Alpha und den Backdrop-Filter steuern, während Randdicke und Randhelligkeit eine dünne, halbtransparente Kante setzen, die das Panel vor unruhigen Hintergründen lesbar hält. Schattenabstand und -weichheit prägen den Schlagschatten unter dem Panel, und der Formschalter wechselt ihn zu einem eingesetzten Schatten für ein zurückgesetztes Aussehen. Im Neumorphismus-Modus treiben dieselben Schattenabstands- und -weichheitswerte einen hellen und einen dunklen Schatten an, die von Ihrer Oberflächenfarbe berechnet werden, erhaben oder gedrückt je nach der Form, die Sie wählen. Eckenabrundung und eine Dunkelmodusversion gelten für beide Stile.
Da eine mattierte oder weich schattierte Oberfläche in einem Mittelton landen kann, der mit schwarz oder weiß schwer zu lesen ist, prüft das Tool den resultierenden Kontrast und fügt oberhalb des CSS einen kurzen Warnungskommentar hinzu, wenn keiner der Textfarben über WCAG AA bequem passt – ein Hinweis zur Anpassung der Oberflächenfarbe oder Deckkraft statt eines Schätzwerts.
Alles wird lokal in Ihrem Browser ausgeführt, während Sie die Schieberegler bewegen – kein Designtool, kein Konto und nichts, das an einen Server gesendet wird. Kopieren Sie das CSS direkt in Ihr Stylesheet, laden Sie es als .txt-Datei herunter, oder senden Sie die Ausgabe zurück in die Eingabe, um es weiter anzupassen.
Häufige Fragen
Was ist der Unterschied zwischen Glassmorphismus und Neumorphismus?
Glassmorphismus verwendet eine durchscheinende, verschwommene Oberfläche, die einen Hinweis auf das zeigt, was dahinter liegt. Neumorphismus verwendet eine undurchsichtige Oberfläche mit einem hellen und einem dunklen Schatten auf gegenüberliegenden Seiten, so dass sie aussieht, als wäre sie aus dem Hintergrund herausgepresst oder hinein.
Warum enthält die Ausgabe manchmal einen Kontrastwarnung?
Eine durchscheinende oder Mitteltone-Oberfläche kann in einem Bereich landen, in dem weder schwarzer noch weißer Text komfortabel lesbar ist. Der Warnungskommentar wird angezeigt, wenn dies geschieht, damit Sie die Oberflächenfarbe oder Deckkraft anpassen können, bevor Sie sie bereitstellen.
Funktioniert backdrop-filter in jedem Browser?
Die Unterstützung ist breit in aktuellem Chrome, Edge, Safari und Firefox, aber das Tool schreibt auch das -webkit-backdrop-filter-Präfix für ältere WebKit-Builds. Sehr alte Browser ignorieren backdrop-filter und zeigen einfach die flache Hintergrundfarbe.
Kann ich gleichzeitig eine Dunkelmodusversion generieren?
Ja. Aktivieren Sie "Dunkelmodusversion hinzufügen" und das Tool hängt einen @media (prefers-color-scheme: dark) Block mit angepassten Deckungs- und Schattenwerten unterhalb der Basisregel an.
Werden mein CSS oder Designdaten irgendwo hochgeladen?
Nein. Das CSS wird vollständig in Ihrem Browser aus den eingestellten Optionswerten generiert – nichts wird an einen Server gesendet.