Générateurs de CSS

Outils permettant de créer à la volée des codes CSS

Vous trouverez sur le Web un grand nombre d’outils vous permettant de générer du code CSS à utiliser dans vos feuilles de styles.

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator : cet outil très complet vous permet de générer des contours dont chaque "coin" possède deux données, ce qui permet d’avoir des formes plus avancées qu’un simple arrondi. Par contre il ne donne pas les variation pour navigateur -moz-border-radius et -webkit-border-radius qu’il vous faut ajouter à la main.
https://cssgenerator.org/border-radius-css-generator.html : contrairement au générateur de la fondation Mozilla, celui-ci vous propose une interface en curseur ainsi que le code pour le border lui-même
https://border-radius.com/ : cet outil très simple vous permet de générer le code pour des arrondis réguliers.
http://www.outils-web.com/page-generateur-CSS-arrondi.asp : un petit dernier qui propose les arrondis simple et le choix du type de bordures ainsi que son épaisseur (mais pas sa couleur).

http://www.css3factory.com/linear-gradients/ : très bon générateur donnant un code complet y compris sur les orientations du dégradé. Son seul défaut est de ne pas prendre la transparence des couleurs.
https://bfotool.com/fr/css-gradient : très précis sur le choix des couleur, cet outil vous propose aussi les code en -moz-linear-gradient, -webkit-gradient, -webkit-linear-gradient, -o-linear-gradient... pour une parfaite compatibilité avec les différents navigateurs
https://cssgradient.io/ : un générateur très complet de dégradé pour vos background. Il permet d’introduire autant de couleur que vous voulez dans vos dégradés ainsi que leur niveau de couche alpha
https://gradients.app/fr/new : celui-ci ne permet le choix de couleur que dans une palette, mais permet le téléchargement d’un fichier PNG en plus du code CSS

https://alvarotrigo.com/shadow-gradients/ : ce générateur permet de créer des ombre en gradient. Ce ne sont pas des box-shadows, mais l’utilisation de pseudo-classes before et after qui permettent cela.
https://fr.makingcss.com/box-shadow : générateur de box-shadows.
https://shadows.brumm.af/ : celui-ci présente une interface en courbes et curseurs.

https://www.cssportal.com/css3-shapes/ ; ce n’est pas vraiment un générateur, mais cette page vous donne les codes CSS pour les principales figures géométriques.
https://bennettfeely.com/clippy/ : plus avancé que le précédent, cette interface vous permet de mettre en place les codes pour vos clip-path (équivalent à l’écrétage en CSS) vous permettant de mettre vos images dans des formes géométriques. À partir de formes prédéfinies, vous pouvez bouger les coins pour obtenir de nouvelle formes.

https://www.bestcssbuttongenerator.com/ : transformer vos lien (balise a) en bouton. À partir d’une série de modèle, vous pouvez changer différents paramètres dont les couleurs de fond et de bordure. L’interface propose aussi les codes pour les état hover et active.
https://neumorphism.io/#e0e0e0 : interface permettant de générer des codes CSS façon neumorphisme. De nombreux paramètres dont les ombres internes, lueurs et ombres externes... Ces codes sont applicable à n’importe quel élément HTML et peuvent donc aussi être appliqué à des div.
https://www.htmlcssbuttongenerator.com/btnGenerator.html. Plutôt utilisé pour des balises button, les codes générés peuvent êrte appliqués à d’autres éléments comme les liens. À noter qu’en cas de choix d’une police, l’interface vous propose aussi le code pour charger la police depuis GoogleFont.

Générateur pour la valeur CSS clamp : https://min-max-calculator.9elements.com (permet de définir des valeurs Max et Min et une valeur intermédiaire préférée.
Générateur de grid : https://grid.layoutit.com/
Générateur de flexbox : https://the-echoplex.net/flexyboxes/
Générateur de page Bootstrap : https://www.layoutit.com/ qui permet de créer des pages sous bootstrap avec cliqué-glissé d’élément du framework

http://css3generator.com/ : vous choisissez le type d’élément dont vous voulez générer le code CSS
https://fr.makingcss.com/gradient : outre les dégradés, ce générateur permet aussi de générer le code pour des ombre (texte et boite), les border-radius, mais aussi les transitions et les transformations
https://fr.w3docs.com/css3-maker/border-radius : ce générateur vous propose dans la même interface les code pour les border-radius, les codes RGBA, les box et text shadows, les transformations... mais pas les dégradés
https://html-css-js.com/css/generator/ : outre les dégradés, les transformation et les border-radius, cette interface vous propose aussi de générer des styles pour vos tableaux, des habillages de polices et des bordures et outline de styles avancés.

http://haoxi.free.fr/generateur-form/ : cette interface vous permet de générer le formulaire HTML et le fichier PHP d’ajout des données dans une BDD (il faudra mettre les codes de connexion quand même !-)

https://scrollbar.app/ : cette interface vous permet de générer le code CSS pour changer le paramétrage de la scrollbar !