Générateurs CSS
Créez visuellement dégradés, ombres portées, coins arrondis et mises en page flexbox, puis copiez un CSS propre.
4 outils
Générateur de dégradés CSSCréez des dégradés CSS linéaires, radiaux et coniques avec autant d'arrêts de couleur que vous voulez. Aperçu Générateur de box-shadow CSSConcevez des ombres CSS visuellement avec plusieurs calques, des ombres intérieures, du flou, de l'étalement eGénérateur de border-radius CSSRéglez les coins arrondis visuellement : liez tous les coins ou ajustez chacun, en px ou en %, créez des cerclGénérateur Flexbox CSSConstruisez des mises en page Flexbox visuellement : direction, retour à la ligne, justify-content, align-item
À propos : Outils CSS
Écrire du CSS en le voyant, sans deviner
Certaines propriétés CSS sont faciles à lire mais difficiles à imaginer. Une ombre portée compte cinq valeurs, un dégradé demande des angles et des arrêts de couleur, et l'alignement flexbox change à chaque propriété modifiée. Ces générateurs CSS vous permettent de déplacer des curseurs, de voir le résultat en direct et de copier un code qui fonctionne dans tous les navigateurs modernes.
Quel générateur CSS vous faut-il ?
- Arrière-plans et boutons : le générateur de dégradés CSS crée des dégradés linéaires et radiaux avec autant d'arrêts de couleur que vous voulez.
- Profondeur et cartes : le générateur de box shadow règle décalage, flou, étendue, couleur et ombres intérieures, y compris les ombres superposées.
- Coins arrondis et formes : le générateur de border radius contrôle chaque coin séparément pour des pilules, des cartes et des formes organiques.
- Mises en page : le générateur flexbox montre comment direction, retour à la ligne, justification et alignement déplacent vos éléments avant d'écrire la moindre ligne.
Conseils pour un CSS propre
- Gardez des ombres discrètes : une faible opacité et un flou plus large paraissent plus naturels qu'un bord sombre et net.
- Vérifiez le contraste du texte sur un dégradé à son point le plus clair, pas au milieu.
- Placez les valeurs répétées, comme l'arrondi et l'ombre, dans des propriétés personnalisées CSS pour garder un design cohérent.
Tous les générateurs fonctionnent dans votre navigateur, sont gratuits et sans compte. Pour des couleurs qui vont bien ensemble, essayez le générateur de palettes de couleurs.