Générateur CSS
- Les fichiers ne quittent pas votre appareil
- S’exécute dans le navigateur
- Gratuit, sans compte, sans filigrane
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]Comment utiliser Générateur CSS
Générez du CSS visuellement, avec un aperçu en direct : ombre portée, chemin de découpe, easing cubic-bezier, glassmorphisme, rayon de bordure organique et ombre de texte. Chaque générateur donne du CSS simple et une classe Tailwind à valeur arbitraire, prêts à copier.
- 1
Choisissez un générateur : Ombre portée, Chemin de découpe, Cubic bezier, Glassmorphisme, Rayon organique ou Ombre de texte.
- 2
Partez d'un préréglage, ou ajustez les curseurs et les couleurs.
- 3
Faites glisser directement sur l'aperçu lorsque c'est proposé : points de clip-path, les deux poignées de bezier, ou les poignées de la forme organique.
- 4
Copiez le CSS ou la classe Tailwind depuis la sortie plus bas.
Questions fréquentes
Puis-je empiler plusieurs ombres ?
Oui. Dans Ombre portée, cliquez sur Ajouter un calque pour combiner des calques, chacun avec son propre décalage, flou, étalement, couleur, opacité et inset.
Comment ajouter ou retirer des points sur un chemin de découpe ?
Double-cliquez sur le bord de la forme pour ajouter un point ; sélectionnez un point et appuyez sur Suppr pour le retirer. Les formes Cercle, Ellipse et Inset utilisent des curseurs à la place.
Pourquoi ne vois-je pas l'effet de verre ?
backdrop-filter ne floute que ce qui est derrière l'élément, il lui faut donc un arrière-plan coloré ou chargé. La sortie inclut le préfixe -webkit- pour Safari.
Que font les valeurs bezier hors de 0–1 ?
Des valeurs Y au-dessus de 1 ou en dessous de 0 font dépasser le mouvement, ce qui donne un effet de rebond ou d'anticipation. Appuyez sur Lecture pour le comparer au mouvement linéaire.
La sortie Tailwind exige-t-elle un plugin ?
Non. Elle utilise la syntaxe de valeurs arbitraires de Tailwind, comme rounded-[…] ou [clip-path:…], qui fonctionne dans Tailwind standard.