Ce site utilise des statistiques de première main respectueuses de la vie privée pour savoir quelles pages et quels outils sont utiles. Aucune donnée n'est partagée avec des traceurs ou publicitaires tiers. En savoir plus

Outils · CSS · Créer un dégradé CSS

Créer un dégradé CSS

Créez un dégradé CSS linéaire, radial ou conique, et copiez le code.

Déposez un fichier ici, ou choisissez-en un.

Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.

Comment ça marche

  1. Choisissez linéaire, radial ou conique, et réglez l'angle ou la position.

  2. Ajoutez ou retirez des étapes de couleur (de 2 à 8), puis utilisez les curseurs pour régler la position et l'opacité de chacune.

  3. Copiez le CSS généré.

Questions fréquentes

Linéaire, radial et conique, chacun avec jusqu'à 8 étapes de couleur.

Oui, le bouton Copier place la chaîne complète du dégradé dans votre presse-papiers, prête à coller.

Oui, lorsque votre navigateur prend en charge la fonction CSS oklch() - c'est détecté automatiquement et proposé seulement quand ça fonctionnera vraiment.

Non. Il n'y a aucun fichier à envoyer ici - le dégradé est généré et affiché entièrement dans votre navigateur.

Outils similaires

Créer une ombre CSS

Créez une ombre CSS multicouche (box-shadow) avec un aperçu en direct, puis copiez le code.

 Arrondir les coins en CSS

Façonnez chaque coin d'une boîte séparément, ou fondez-les en une forme organique, et copiez le CSS border-radius.

 Créer un effet glassmorphism

Créez une carte en verre dépoli avec flou d'arrière-plan, transparence et bordure douce, et copiez le CSS.

 Générateur de courbe cubic-bezier

Faites glisser une courbe pour créer une valeur d'accélération cubic-bezier(), regardez-la jouer avec une transition CSS en direct, et copiez le code.

 Générateur de clip-path

Créez une forme de découpe CSS clip-path - polygone, cercle, ellipse ou rectangle intérieur - avec un aperçu en direct, et copiez le code.

 Minificateur et formateur CSS

Minifiez ou mettez en forme du CSS, en direct pendant que vous collez, entièrement dans votre navigateur.

 Bac à sable Flexbox

Créez une mise en page CSS flexbox - direction, retour à la ligne, justification, alignement, espacement, et croissance/réduction/base par élément - avec un aperçu en direct, et copiez le code.

 Bac à sable Grid

Créez une mise en page CSS grid - nombre de pistes, espacements, alignement, et placement par élément - avec un aperçu en direct, et copiez le code.

Commentaires

  1. Aucun commentaire pour le moment. Soyez le premier à partager votre expérience.
Votre note (facultatif)

Aucune note sélectionnée