Über dieses Tool
Mit CSS Custom Properties — meist CSS-Variablen genannt — definieren Sie einen Wert wie eine Markenfarbe, eine Abstandseinheit oder eine Schriftfamilie nur einmal und verwenden ihn überall mit var(--name) wieder. Wiederkehrende Werte zentral zu verwalten bedeutet, dass eine einzige Änderung auf :root-Ebene sich durch das gesamte Stylesheet zieht, statt Dutzende Dateien per Suchen-und-Ersetzen anzufassen; und da Custom Properties lebendige DOM-Werte sind, können JavaScript oder eine Media Query sie zur Laufzeit auslesen und neu schreiben — das ermöglicht sofortigen Themenwechsel, Dark-Mode-Umschalter oder vom Nutzer anpassbare Abstände, ohne das CSS anzufassen.
Geben Sie unten für jede Zeile einen Namen und einen Wert ein; dieses Tool bereinigt jeden Namen automatisch, entfernt ein überflüssiges führendes „--“ und ersetzt ungültige Zeichen durch Bindestriche, sodass ein Tippfehler wie ein fehlendes Präfix oder ein verirrtes Leerzeichen den generierten Block nie zerstört. Kopieren Sie die :root { ... }-Ausgabe direkt in Ihr Stylesheet oder laden Sie sie als eigene .css-Datei herunter, um sie überall per @import einzubinden. Alles läuft lokal in Ihrem Browser während der Eingabe ab; nichts wird hochgeladen.
Häufige Fragen
Werden meine Werte irgendwohin hochgeladen?
Nein. Alles läuft lokal in Ihrem Browser — Ihre Name/Wert-Paare verlassen niemals Ihr Gerät.
Kann ich die Variablen statt auf :root auf einen bestimmten Selektor beschränken?
Ja — legen Sie einen eigenen Selektor fest, und der generierte CSS-Block verwendet ihn anstelle von :root.