Générateurs CSS
Design CSS visually and copy the code — build gradients and box-shadows with a live preview, no guesswork.
À propos de Générateurs CSS
Certaines propriétés CSS sont presque impossibles à écrire à l'aveugle. Les dégradés et les ombres portées sont les deux pires : la syntaxe condense plusieurs valeurs sur une seule ligne, et une petite modification de l'une d'elles peut transformer le résultat. Cette catégorie propose deux générateurs visuels précisément pour cela — le générateur de dégradé CSS et le générateur d'ombre portée CSS. Vous ajustez les réglages, observez la mise à jour d'un aperçu en direct, et copiez la règle finie lorsqu'elle vous convient. C'est destiné aux développeurs front-end, aux designers et à quiconque ajuste un thème et préfère voir le résultat plutôt que deviner des valeurs.
Faites appel au générateur de dégradé chaque fois que vous avez besoin d'un fond qui soit plus qu'une couleur unie — une section d'en-tête, un bouton, l'en-tête d'une carte, une surimpression qui rend le texte lisible par-dessus une image. Les éléments qui récompensent l'expérimentation sont l'angle et la position de chaque arrêt de couleur, car déplacer un arrêt est ce qui transforme un mélange terne en un mélange net. Utilisez le générateur d'ombre portée pour la profondeur : cartes, menus déroulants, fenêtres modales et boutons qui doivent paraître en relief. Sa leçon utile est que le décalage, le flou et l'étalement font des choses bien différentes, et que les ombres qui paraissent convaincantes sont généralement plus douces et plus transparentes que l'instinct ne le suggère — un grand flou à faible opacité se lit comme de la lumière, tandis qu'une ombre dure et sombre se lit comme un autocollant. Les deux outils produisent du CSS standard que vous collez directement dans une feuille de style.
Les deux sont gratuits, ne nécessitent aucune inscription et fonctionnent entièrement dans votre navigateur, de sorte que rien de ce que vous concevez n'est envoyé et que l'aperçu est instantané plutôt qu'un aller-retour. Vous obtenez une simple déclaration background ou box-shadow à copier — aucun framework, aucune dépendance, aucun commentaire d'attribution. Deux choses à savoir : l'aperçu montre comment votre propre navigateur rend la règle, alors vérifiez d'autres navigateurs pour tout ce qui est critique, et des ombres lourdes ou de grands dégradés sur de nombreux éléments peuvent coûter cher en performance de rendu sur les appareils modestes. Pour choisir les couleurs que vous injectez dans un dégradé, la catégorie outils de couleur propose un convertisseur, un générateur de nuances et un vérificateur de contraste.
Questions fréquentes
Le CSS généré fonctionne-t-il dans tous les navigateurs ?
Les dégradés linéaires et radiaux ainsi que box-shadow sont pris en charge par tous les navigateurs actuels sans préfixes propriétaires. Vous n'avez besoin de versions préfixées que pour des navigateurs réellement anciens, que presque aucun projet ne vise aujourd'hui. Si le vôtre le fait, vérifiez l'exigence précise plutôt que de supposer.
Puis-je utiliser ces dégradés et ombres dans un projet commercial ?
Oui. Le résultat est du CSS ordinaire que vous avez écrit à l'aide d'un éditeur visuel. Il n'y a rien à licencier, créditer ou attribuer.
Pourquoi mon ombre est-elle différente sur mon site par rapport à l'aperçu ?
Généralement à cause du contexte qui l'entoure. Une ombre se lit différemment sur un fond coloré que sur un fond blanc, et elle peut être coupée par un parent en overflow hidden ou masquée derrière un élément voisin dont l'ordre d'empilement est plus élevé. La règle elle-même est identique.
Puis-je ajouter plusieurs ombres ou plus de deux couleurs de dégradé ?
Le CSS prend en charge les deux : box-shadow accepte une liste séparée par des virgules, et les dégradés acceptent autant d'arrêts de couleur que vous le souhaitez. Superposer deux ou trois ombres avec des flous différents est la manière d'obtenir la profondeur la plus réaliste.