Réglez, prévisualisez, copiez. Sept générateurs en un : ombres, bordures & arrondis, dégradés, flexbox, grid, transitions & transform, et glassmorphism. Le CSS se met à jour en direct — aucune ligne à écrire.
/* Réglez les contrôles */Certaines propriétés CSS sont fastidieuses à régler « à l'aveugle » : une ombre portée harmonieuse, un dégradé équilibré, une grille responsive ou une transition fluide demandent des allers-retours entre le code et le navigateur. Un générateur visuel supprime ces allers-retours : vous manipulez des curseurs, l'aperçu réagit en direct, et vous copiez le CSS final.
La propriété box-shadow prend, dans l'ordre : décalage horizontal, décalage vertical, rayon de flou, étalement, puis la couleur. Le mot-clé inset transforme l'ombre portée en ombre intérieure. Une ombre discrète (faible opacité, flou moyen, décalage léger) donne un rendu plus professionnel qu'une ombre marquée.
Un linear-gradient suit un angle (0deg = vers le haut, 90deg = vers la droite) ; un radial-gradient rayonne depuis un centre. Chaque couleur peut être placée à un pourcentage précis, ce qui contrôle la zone de transition. Pour des teintes cohérentes, piochez-les dans le sélecteur de couleur.
Flexbox gère l'alignement sur un axe (une rangée ou une colonne) : idéal pour une barre de navigation, une série de boutons, un centrage. Grid gère deux axes (lignes et colonnes) : parfait pour une galerie, un tableau de bord, une mise en page complète. Le mode auto-fit avec minmax() produit une grille responsive qui ajuste seule son nombre de colonnes.
Une transition anime le passage d'un état à un autre (au survol, au focus…). Associée à transform (rotation, mise à l'échelle, translation), elle crée des effets d'interaction fluides sans JavaScript. Le glassmorphism, lui, combine un fond translucide, un backdrop-filter: blur() et une fine bordure claire pour l'effet « verre dépoli » popularisé par les interfaces modernes.
style. Le sélecteur .element est un exemple : renommez-le selon votre besoin.backdrop-filter est bien supportée par les navigateurs récents, mais peut nécessiter le préfixe -webkit- (inclus dans le code généré) et n'a d'effet que sur un arrière-plan visible derrière l'élément.