Neuf générateurs CSS visuels avec aperçu en direct : dégradés linéaires, radiaux et coniques, box-shadow multicouche, border-radius avec formes organiques, glassmorphism, text-shadow, polygones clip-path, courbes cubic-bezier, flexbox et grille CSS. Faites glisser directement dans l’aperçu, partez de préréglages et touchez le code pour copier un CSS standard et propre. Vos derniers réglages sont mémorisés.
Mode d’emploi
- Choisissez un générateur dans la rangée du haut : dégradé, ombre, arrondis, verre, ombre de texte, clip-path, easing, flexbox ou grid.
- Réglez les curseurs ou faites glisser directement dans l’aperçu : arrêts sur la barre du dégradé, points du clip-path, poignées de la courbe de Bézier, quatre poignées du border-radius.
- Vous pouvez partir d’un modèle sous le code.
- Touchez le code pour le copier. Vos derniers réglages de chaque générateur sont mémorisés.
- Cliquez sur un espace libre de la barre du dégradé pour ajouter un arrêt avec la couleur à cet endroit.
- En mode border-radius à 8 valeurs, les quatre poignées déplacent des paires de valeurs, comme les outils « fancy border radius ».
- backdrop-filter demande le préfixe -webkit- sur Safari ; le code du verre contient les deux.
- Flexbox et grid : touchez une boîte numérotée dans l’aperçu pour lui donner son propre grow, order ou span.
Pourquoi générer du CSS visuellement
Des propriétés comme box-shadow, clip-path ou cubic-bezier prennent plusieurs nombres dont l’effet est difficile à imaginer. Un box-shadow de 0 10px 30px -5px rgba(0, 0, 0, 0.25) se lit décalage x, décalage y, flou, étalement et couleur ; un cubic-bezier(0.34, 1.56, 0.64, 1) dépasse sa cible parce que sa deuxième valeur y est supérieure à 1. Déplacer la forme et voir le résultat va plus vite que modifier des nombres et recharger.
Le résultat est du CSS pur qui fonctionne dans tous les navigateurs actuels sans framework : il va directement dans une feuille de style, un objet CSS-in-JS ou un fichier de design tokens.
Valeurs de référence utiles
Les angles de dégradé partent du haut et tournent dans le sens horaire : 0deg vers le haut, 90deg vers la droite, 180deg vers le bas. Les mots-clés d’accélération valent ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1) et ease-in-out = (0.42, 0, 0.58, 1) ; les valeurs x restent entre 0 et 1. border-radius accepte jusqu’à huit valeurs, rayons horizontaux puis verticaux après une barre oblique : c’est ainsi qu’on obtient des formes organiques comme 30% 70% 70% 30% / 30% 30% 70% 70%.
Conseils pour un bon rendu
Une ombre réaliste vient de plusieurs couches douces plutôt que d’une seule sombre, et une ombre teintée de la couleur du fond paraît moins sale que le noir pur. Gardez l’effet verre lisible en vérifiant le contraste du texte sur la zone la plus chargée du fond. Pour la mise en page, flexbox convient aux lignes ou colonnes à une dimension, la grille aux lignes et colonnes à la fois ; touchez une boîte dans l’aperçu pour lui donner son propre grow, order ou span.
Questions fréquentes
Ces effets CSS marchent-ils dans tous les navigateurs ?
Dégradés, box-shadow, border-radius, text-shadow, clip-path, cubic-bezier, flexbox et grille fonctionnent dans tous les navigateurs actuels. backdrop-filter, utilisé pour l’effet verre, demande le préfixe -webkit- dans les anciennes versions de Safari : le code inclut donc les deux.
Comment faire une ombre douce et réaliste ?
Empilez deux ou trois couches au flou et au décalage croissants et à faible opacité, par exemple 0 1px 2px à 8 %, 0 4px 8px à 8 % et 0 16px 32px à 8 %. Les préréglages multicouches sont un bon point de départ.
Quelle différence entre dégradé linéaire, radial et conique ?
Le linéaire change de couleur le long d’une droite, le radial s’étend depuis un centre en cercle ou en ellipse, et le conique fait tourner les couleurs autour d’un centre comme une aiguille, utile pour les camemberts et les roues chromatiques.
Comment créer une forme organique avec border-radius ?
Utilisez la syntaxe à huit valeurs avec barre oblique, comme 30% 70% 70% 30% / 30% 30% 70% 70%. Faites glisser les quatre poignées de l’aperçu pour la modeler et copiez le résultat.
Peut-on animer les formes clip-path ?
Oui, entre des polygones ayant le même nombre de points. Gardez le même nombre de points, ajoutez une transition sur clip-path et changez le polygone au survol ou via une classe.
Le code généré est-il libre d’utilisation ?
Oui. C’est du CSS ordinaire issu de vos réglages, sans licence ni mention obligatoire.