CSS calc() Playground
Testez et visualisez des expressions CSS calc() en temps réel. Mélangez les unités, vérifiez la syntaxe et copiez le code CSS. Gratuit, 100% dans votre navigateur.
Référence
Qu'est-ce que calc() ?
La fonction CSS calc() permet d'effectuer des calculs directement dans les valeurs de propriétés CSS. Elle peut mélanger différentes unités, par exemple calc(100% - 2rem), ce qui est particulièrement utile pour les mises en page responsive.
Unités prises en charge
calc() prend en charge toutes les unités de longueur CSS : px, rem, em, %, vw, vh et plus. Les unités peuvent être mélangées dans une expression : calc(50% + 20px - 1rem).
Exemples pratiques
Pleine largeur moins marges : width: calc(100% - 2 * 1rem). Typographie fluide : font-size: calc(1rem + 0.5vw). Centrage : margin-left: calc(50% - 150px). Les expressions peuvent aussi être imbriquées.
Confidentialité
Tout le traitement s'exécute 100% dans votre navigateur. Aucune donnée n'est envoyée à un serveur.