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.

Atelier CSS — Générateur en direct de dégradés, ombres, filtres, transformations

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.

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.