Générer des dégradés CSS et des ombres de boîte

Comment utiliser Générateur de dégradés et d’ombres CSS

1. 1

   Choisissez dégradé ou ombre de boîte

   Passez d’un éditeur à l’autre grâce aux onglets au-dessus de l’aperçu.

2. 2

   Partez d’un préréglage

   Cliquez sur une vignette de préréglage pour le charger, ou gardez le réglage par défaut et ajustez à partir de là.

3. 3

   Ajustez visuellement

   Faites glisser les arrêts de couleur et réglez l’angle, ou ajoutez des calques d’ombre et affinez le décalage, le flou et l’étendue.

4. 4

   Copiez le code

   Copiez la déclaration CSS ou la classe Tailwind et collez-la dans votre projet.

À propos de Générateur de dégradés et d’ombres CSS

Les dégradés et les ombres sont les deux effets CSS que l’on retouche le plus souvent à tâtons dans les outils de développement du navigateur. Ce générateur offre à chacun un éditeur visuel avec un grand aperçu en direct, puis écrit la déclaration CSS exacte et la classe Tailwind à valeur arbitraire correspondante, comme bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], pour que vous puissiez coller le résultat directement dans une feuille de style ou un className.

L’éditeur de dégradé crée des dégradés linéaires, radiaux et coniques. Cliquez sur la barre des arrêts pour ajouter une couleur à l’endroit voulu, faites glisser un arrêt pour le déplacer ou utilisez les flèches du clavier pour un placement précis, et réglez l’opacité de chaque arrêt. Les dégradés linéaires et coniques acceptent un angle, les dégradés radiaux et coniques un point central, les dégradés radiaux un cercle ou une ellipse, et tous peuvent se répéter pour obtenir des rayures et des anneaux. Vous pouvez aussi choisir l’espace colorimétrique du mélange : OKLab et OKLCH évitent le milieu gris et terne que produit le mélange sRGB classique entre des couleurs saturées, et ils sont pris en charge par tous les navigateurs actuels.

L’éditeur d’ombre de boîte empile autant de calques que nécessaire. Chaque calque a ses décalages X et Y, un flou, une étendue, une couleur avec opacité, une option interne et un bouton de visibilité, et les calques peuvent être réordonnés, car le premier est dessiné au-dessus. Une boîte d’aperçu aux dimensions, au rayon des coins et aux couleurs réglables montre l’effet sur une surface claire ou sombre.

Douze préréglages par éditeur, des couchers de soleil, camemberts et rayures aux élévations Material, ombres douces superposées, néomorphisme et décalages nets, vous donnent un point de départ. L’outil ne couvre que les dégradés et les ombres de boîte : text-shadow, filter: drop-shadow et les dégradés SVG ne sont pas générés.

Fonctionnalités

Générateur de dégradés et d’ombres CSS : questions fréquentes