CSS custom properties

Extrayez les variables CSS de n'importe quel site

Design Snap est une extension Chrome gratuite qui liste chaque CSS custom property déclarée sur :root de n'importe quel site — nom, valeur calculée, et un swatch quand la valeur est une couleur. Un clic capture l'ensemble, et l'export CSS Vars vous donne un bloc :root propre, prêt à coller.

Ajouter à Chrome — gratuit Voir les plans PRO

Plan gratuit · Sans compte · Analyse 100 % locale

Comment extraire les variables CSS d'un site web

Extraire les variables CSS d'un site tient en trois étapes : installer Design Snap, appuyer sur Extract sur la page, puis ouvrir l'onglet CSS Variables. Les design systems comme celui de Stripe exposent des centaines de custom properties — Design Snap capture chacune de celles déclarées sur :root, en une seconde environ.

  1. Installer

    Ajoutez Design Snap à Chrome depuis le Chrome Web Store. Plan gratuit, sans compte.

  2. Extraire

    Ouvrez le site et appuyez sur Extract. L'onglet CSS Variables liste chaque custom property de :root avec sa valeur.

  3. Exporter

    Cliquez sur CSS Vars pour un bloc :root prêt à coller — ou exportez les mêmes tokens en JSON, Tailwind ou Figma.

Le jeu de tokens complet, pas un échantillon

Les CSS custom properties sont l'endroit où vivent les design systems modernes. Les lire vous donne les tokens exacts qu'utilisent les développeurs du site.

  • Chaque custom property de :root, avec sa valeur calculée
  • Les valeurs de couleur ont un swatch visuel à côté de l'hex
  • Tient la charge sur les gros design systems — 712 variables extraites sur stripe.com
  • L'inspecteur d'éléments résout les valeurs de variables au niveau composant, au survol
  • 100 % local : le CSS de la page ne quitte jamais votre navigateur
stripe.com
Popup Design Snap sur stripe.com montrant le résumé d'extraction : top 5 couleurs, 1 police, 712 variables CSS capturées
variables.css Export CSS Vars — Gratuit
:root {
  --color-primary: #6366f1;
  --color-background: #f8fafc;
  --color-ink: #0f172a;
  --font-sans: 'Inter', sans-serif;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
}
tokens.json Style Dictionary — Gratuit
{
  "color": {
    "primary":    { "value": "#6366f1" },
    "background": { "value": "#f8fafc" }
  },
  "radius": {
    "md": { "value": "8px" }
  }
}

Variables CSS — FAQ

Installez Design Snap, ouvrez le site et appuyez sur Extract. L'onglet CSS Variables liste chaque custom property déclarée sur :root — son nom, sa valeur calculée, et un swatch quand la valeur est une couleur. Des sites comme Stripe exposent des centaines de variables ; Design Snap les capture toutes en un clic.

Oui. L'export CSS Vars génère un bloc :root propre avec tous les tokens extraits, prêt à coller dans une feuille de style. Vous pouvez aussi exporter les mêmes tokens en JSON Style Dictionary, en objet tailwind.config.js ou en tokens Figma — le tout inclus dans le plan gratuit.

Design Snap liste les custom properties déclarées sur :root, là où les design systems déclarent leurs tokens globaux par convention. Les variables scopées à un composant sont couvertes par l'inspecteur d'éléments : survolez n'importe quel élément pour voir ses styles calculés, valeurs de variables résolues comprises.

Générateur de thème Tailwind

Un tailwind.config.js ou un @theme Tailwind v4 prêt à coller depuis n'importe quel site.

Générateur de thème shadcn/ui

Mappez la palette d'un site sur les rôles sémantiques shadcn/ui, prêt pour globals.css.

Extracteur de palette

Les couleurs d'un site classées par usage réel, avec valeurs hex.

vs DevTools & CSS Peeper

Comment Design Snap se compare aux DevTools de Chrome et à CSS Peeper.