Can I use the output in Tailwind?

Yes. Click Copy Tailwind to get arbitrary-value classes like bg-[linear-gradient(...)], shadow-[...], rounded-[12px]. Paste them directly on any element. Works in Tailwind v3 and v4.

How do I share my design with someone?

Click Share link. Your entire state gets encoded into the URL after ?s=. Send that URL and the recipient lands on your exact design. No account, no backend, the URL is the state.

Why is there no @keyframes animation generator?

A good animation UI is a tool of its own (timeline, easing curves, multi-property keyframes). Bolting it onto this one would push both toward mediocrity. If there's demand we'll build a dedicated animation tool.

What's the difference between filter: drop-shadow and box-shadow?

box-shadow casts a shadow of the bounding box. filter: drop-shadow follows the actual pixel shape (border-radius curves, SVG, transparent PNGs). For a rounded card both look identical. For a PNG with transparent areas, only drop-shadow follows the outline.

Does my work save between visits?

Yes. The current state auto-saves to localStorage on every change. Close the tab, come back later, the design is waiting. Click Reset to start fresh.

What is the difference between filter and backdrop-filter?

filter applies visual effects to the element itself (and its contents). backdrop-filter applies effects to the area behind the element — useful for frosted-glass effects (combine with a semi-transparent background: background: rgba(255,255,255,0.2); backdrop-filter: blur(10px)). backdrop-filter has strong browser support in modern browsers (Chrome 76+, Firefox 103+, Safari 9+).

How do I create a smooth CSS gradient?

For smooth gradients, use OKLCH or HSL color spaces instead of hex/RGB — they produce more perceptually uniform transitions. In CSS: background: linear-gradient(in oklch, oklch(60% 0.2 250), oklch(60% 0.2 350)). Avoid the 'gray zone' problem in RGB gradients by using color-interpolation hints or switching to OKLCH. For creative gradients, add 3+ color stops with easing hints.

Atelier CSS — Générateur CSS en direct

Comment ça fonctionne

Chaque panneau à gauche correspond à une propriété CSS. Déplacez un curseur, choisissez une couleur, ajoutez une étape de dégradé — l'aperçu à droite se met à jour instantanément avec tous les styles appliqués à un élément échantillon. Le panneau de sortie en bas donne le CSS final sous trois formats : bloc standard, attribut style inline, ou classes Tailwind à valeurs arbitraires. Votre travail se sauvegarde automatiquement dans localStorage, donc fermer l'onglet n'efface pas votre design. Le bouton de partage encode l'état complet dans l'URL — collez-la n'importe où et le destinataire atterrit sur le même design.

Références

Chaque propriété suit la référence MDN officielle. Pour les dégradés voir CSS Images Module Level 4 §gradients. Box-shadow est défini dans CSS Backgrounds and Borders Level 3. Les fonctions filter viennent de CSS Filter Effects Module Level 1. Les transformations suivent CSS Transforms Module Level 2. Le widget émet du CSS standard qui fonctionne dans tous les navigateurs modernes — aucun préfixe vendeur requis pour les propriétés exposées ici.

Ce que l'outil fait et ne fait pas

Cinq panneaux couvrent les propriétés que vous ajustez 90% du temps : dégradé, ombre (multi-couche), bordure + rayon, filtre, et transformation. Sept préréglages vous donnent un point de départ rapide — Glassmorphisme, Neumorphisme, Rétro 2001, Brutaliste, Ombre douce, Néon, Cyberpunk. Tout génère du vrai CSS à coller dans votre code ou en className Tailwind à valeurs arbitraires.

Ce qui n'y est pas, volontairement : pas de générateur d'animations @keyframes (l'animation est une UX à part entière — ça écraserait le reste), pas de constructeur de layouts grid/flex (beaucoup d'outils le font déjà très bien), pas de générateur de filtres SVG, pas de prévisualisation sur votre propre image. Vous voyez le résultat sur une carte échantillon et vous copiez.

Quand utiliser le terrain de jeu CSS

Utilisez le terrain de jeu CSS pour expérimenter des effets CSS avant de les intégrer en production : testez des combinaisons de dégradés, des ombres de boîte, des valeurs de border-radius, des filtres CSS (flou, luminosité, contraste) et des transformations CSS visuellement. Utile aussi pour expliquer les propriétés CSS aux apprenants, générer des extraits de code à copier-coller et prototyper rapidement des effets visuels sans configurer un environnement de développement. Combinez-le avec le Color Picker, le Color Contrast Checker, le Color Palette Generator, ou le Regex Tester pour un flux de travail de design front-end complet.

Référence rapide des propriétés CSS

Propriétés CSS visuelles fréquemment utilisées :

box-shadow : décalage-x décalage-y rayon-flou rayon-étendue couleur. Ombres multiples : séparées par des virgules. Les ombres internes utilisent le mot-clé inset.

border-radius : haut-gauche haut-droit bas-droit bas-gauche. Utilisez 50% pour les cercles ; valeurs en px pour les pilules.

linear-gradient : linear-gradient(direction, arrêt-couleur1, arrêt-couleur2). Directions : to right, 45deg, etc.

filter : blur(4px), brightness(1.2), contrast(1.5), saturate(2), grayscale(1), drop-shadow(...). Chaînez plusieurs filtres avec des espaces.

transform : scale(1.2), rotate(45deg), translateX(10px), skew(10deg). Utilisez transform-origin pour contrôler le point de pivot.

Questions fréquentes

Puis-je utiliser la sortie dans Tailwind ?

Oui. Cliquez sur « Copy Tailwind » — vous obtenez des classes à valeurs arbitraires comme bg-[linear-gradient(...)], shadow-[...], rounded-[12px]. Collez-les directement sur un élément. Fonctionne en Tailwind v3 et v4.

Comment partager un design avec quelqu'un ?

Cliquez sur le bouton de partage. Tout votre état (chaque curseur, couleur, étape) est encodé dans l'URL après ?s=. Envoyez cette URL et le destinataire atterrit sur votre design exact. Pas de compte, pas de backend — l'URL est l'état.

Pourquoi pas de générateur d'animations / @keyframes ?

Faire une UI d'animation potable (timeline, courbes d'easing, keyframes multi-propriété) est un outil en soi. L'ajouter ici rendrait les deux médiocres. Si la demande est là, on construira un /css-animation dédié. Pour des transitions simples, utilisez le CSS hover/focus de votre framework.

Quelle est la différence entre filter: drop-shadow et box-shadow ?

box-shadow projette l'ombre de la boîte englobante de l'élément. filter: drop-shadow projette une ombre qui suit la forme des pixels (y compris les coins arrondis, formes SVG, PNG transparents). Pour une carte arrondie, les deux sont identiques. Pour un PNG d'une tasse, seul drop-shadow suit le contour de la tasse. Cet outil expose box-shadow — utilisez la syntaxe CSS filter manuellement pour drop-shadow.

Mon travail est-il sauvegardé entre les visites ?

Oui. Votre état courant se sauvegarde automatiquement dans localStorage à chaque changement. Fermez l'onglet, revenez la semaine prochaine — votre design vous attend. Cliquez sur Réinitialiser pour repartir à zéro. Pour conserver le design ailleurs, copiez le lien de partage ou exportez le CSS.

Quelle est la différence entre filter et backdrop-filter ?

filter applique des effets visuels à l'élément lui-même (et son contenu). backdrop-filter applique des effets à la zone derrière l'élément — utile pour les effets verre dépoli (combinez avec un fond semi-transparent : background: rgba(255,255,255,0.2); backdrop-filter: blur(10px)). backdrop-filter est bien supporté dans les navigateurs modernes.

Comment créer un dégradé CSS fluide ?

Pour des dégradés fluides, utilisez les espaces colorimétriques OKLCH ou HSL plutôt que hex/RVB — ils produisent des transitions perceptuellement plus uniformes. En CSS : background: linear-gradient(in oklch, oklch(60% 0.2 250), oklch(60% 0.2 350)). Évitez le problème de la 'zone grise' dans les dégradés RVB en utilisant des indicateurs d'interpolation ou en passant à OKLCH.

Par Bam's Thinkery — Mis à jour le 2 mai 2026