CSS-Calc-Playground
Teste und visualisiere CSS calc()-Ausdrücke in Echtzeit. Mische Einheiten, prüfe die Syntax und kopiere den CSS-Code. Kostenlos, 100% in deinem Browser.
Referenz
Was ist calc()?
Die CSS-Funktion calc() ermöglicht Berechnungen direkt in CSS-Eigenschaftswerten. Sie kann verschiedene Einheiten mischen, z. B. calc(100% - 2rem), was besonders für responsive Layouts nützlich ist.
Unterstützte Einheiten
calc() unterstützt alle CSS-Längeneinheiten: px, rem, em, %, vw, vh und weitere. Einheiten können innerhalb eines Ausdrucks gemischt werden: calc(50% + 20px - 1rem).
Praxisbeispiele
Volle Breite minus Ränder: width: calc(100% - 2 * 1rem). Fluid Typography: font-size: calc(1rem + 0.5vw). Zentrierung: margin-left: calc(50% - 150px). Ausdrücke können auch verschachtelt werden.
Datenschutz
Alle Verarbeitung läuft 100% in deinem Browser. Es werden keine Daten an Server gesendet.