Créateur de fond CSS

Concevez des fonds unis, dégradés et à motifs avec un aperçu en direct. Réglez les couleurs, l'angle, la position et l'espacement, puis copiez le CSS prêt à l'emploi.

Texte d'aperçu
Point 10%
Point 2100%
background: linear-gradient(135deg, #059669 0%, #0ea5e9 100%);

Noter Créateur de fond CSS

Dans quelle mesure cet outil vous a-t-il été utile ? Votre note aide d'autres personnes à le trouver.

Cinq styles d’arrière-plan, un seul outil

Les couleurs unies, les dégradés linéaires, radiaux et coniques, et les motifs en mosaïque passent tous par la même propriété background, mais écrire la syntaxe à la main est facile à rater. Créez chaque style visuellement ici et copiez un CSS qui fonctionne du premier coup.

Comment fonctionne Créateur de fond CSS

Un arrière-plan CSS, ce n'est pas qu'une simple couleur. Cet outil en construit cinq types : uni, dégradé linéaire, dégradé radial, dégradé conique et motif répété, et montre exactement comment chacun s'écrit.

Changez de mode en haut pour modifier le rôle des commandes ci-dessous. Les dégradés linéaires fondent les couleurs le long d'une ligne droite : vous réglez donc l'angle et chaque arrêt de couleur. Les dégradés radiaux fondent les couleurs vers l'extérieur à partir d'un point central : vous choisissez alors une forme en cercle ou en ellipse et une position. Les dégradés coniques balaient les couleurs autour d'un point central comme une roue chromatique, la technique à l'origine des diagrammes circulaires en pur CSS. Ajoutez ou supprimez des arrêts de couleur pour contrôler le nombre de couleurs qui se fondent et la place de chacune dans la transition, jusqu'à quatre par dégradé.

Le mode Motif fonctionne différemment : au lieu d'un fondu progressif, il répète une petite forme (rayures, points, grille ou damier) sur tout l'arrière-plan à l'aide de dégradés répétés et de background-size, pour donner de la texture plutôt qu'un dégradé. Ajustez les deux couleurs et le curseur d'espacement pour régler la densité ou l'aération du motif.

L'aperçu se met à jour dès que vous déplacez une commande, et la bascule texte clair et foncé montre si votre arrière-plan convient à un texte lisible, puisqu'une extrémité d'un dégradé est souvent bien plus claire que l'autre. Quand le résultat vous convient, copiez la déclaration CSS sous l'aperçu et collez-la dans la propriété background de n'importe quel élément. Tout s'exécute dans votre navigateur ; rien de ce que vous créez ici n'est enregistré ni envoyé ailleurs.

Comment utiliser Créateur de fond CSS

1

Choisir un type d'arrière-plan

Choisissez Uni, Dégradé linéaire, radial ou conique, ou Motif, et les commandes ci-dessous s'adaptent.

2

Définir les couleurs, l'angle et la position

Ajoutez ou supprimez des arrêts de couleur, faites glisser les commandes d'angle ou de position, et observez l'aperçu en taille réelle se mettre à jour en direct.

3

Copier le CSS

Copiez la déclaration de background générée et collez-la sur n'importe quel élément de votre feuille de style.

Exemple d'utilisation

Un dégradé diagonal à deux couleurs, le style d'arrière-plan le plus courant sur les pages d'atterrissage modernes :

Entrée
Type: Linear Gradient, Angle: 135deg, Stops: #059669 at 0%, #0EA5E9 at 100%
Sortie
background: linear-gradient(135deg, #059669 0%, #0EA5E9 100%);

Questions fréquentes

Quelle est la différence entre un dégradé linéaire, radial et conique ?
Un dégradé linéaire fond les couleurs le long d'une ligne droite selon un angle donné. Un dégradé radial fond les couleurs vers l'extérieur à partir d'un point central, en cercle ou en ellipse. Un dégradé conique balaie les couleurs autour d'un point central comme les aiguilles d'une horloge, ce qui permet de créer des diagrammes circulaires et des roues chromatiques en pur CSS.
Puis-je utiliser plus de deux couleurs dans un dégradé ?
Oui. Chaque mode de dégradé ici prend en charge jusqu'à quatre arrêts de couleur. Utilisez « Ajouter un arrêt de couleur » pour insérer une couleur de plus et faites glisser son curseur de position pour décider où elle se situe dans la transition.
Comment changer l'angle ou la direction d'un dégradé ?
Pour les dégradés linéaires et coniques, faites glisser le curseur Angle ; 0deg pointe vers le haut et l'angle augmente dans le sens horaire, donc 90deg va de gauche à droite et 135deg du haut à gauche vers le bas à droite. Pour les dégradés radiaux, utilisez plutôt la liste déroulante Position pour déplacer le point central.
Quelle est la différence entre un dégradé radial en cercle et en ellipse ?
Un dégradé radial en cercle reste parfaitement rond quelles que soient la largeur et la hauteur de l'élément auquel il est appliqué. Une ellipse s'étire pour suivre le rapport d'aspect de l'élément : elle paraît ronde sur une boîte carrée, mais ovale sur une large bannière.
Puis-je combiner un motif avec un arrière-plan en dégradé ?
Pas directement dans cet outil, puisque chaque mode génère une valeur d'arrière-plan complète. Pour les superposer, copiez séparément le CSS du motif et celui du dégradé, puis combinez à la main les deux jeux de valeurs background-image en une seule propriété background-image séparée par des virgules.
Un arrière-plan CSS ralentira-t-il mon site web ?
Non. Les dégradés et motifs répétés générés ici sont du pur CSS, sans fichier image à télécharger : ils se chargent instantanément et n'ajoutent que quelques lignes à votre feuille de style, contrairement à une photo d'arrière-plan ou à une texture PNG exportée.
Ai-je besoin d'un fichier image, ou est-ce vraiment du CSS ?
C'est entièrement du CSS. Chaque mode, y compris les motifs en mosaïque, repose sur des fonctions de dégradé et sur background-size, et non sur une image importée ou générée : le résultat est une simple valeur texte que vous collez dans une feuille de style.
Comment m'assurer que le texte reste lisible sur un dégradé ?
Utilisez l'option Texte d'aperçu pour superposer un exemple de texte clair ou foncé à votre arrière-plan et vérifier le contraste aux deux extrémités du dégradé, pas seulement au milieu, car une extrémité est souvent bien plus claire que l'autre.
Les dégradés et motifs CSS sont-ils pris en charge par tous les navigateurs ?
Les dégradés linéaires et radiaux fonctionnent sans préfixe dans tous les navigateurs modernes. Les dégradés coniques sont pris en charge dans toutes les versions actuelles de Chrome, Firefox, Safari et Edge ; seules de très anciennes versions de navigateurs ne les gèrent pas.
Puis-je l'utiliser pour des boutons et des cartes, pas seulement pour l'arrière-plan d'une page entière ?
Oui. Le CSS généré est une valeur background standard, il fonctionne donc de la même façon sur un bouton, une carte, un en-tête ou tout autre élément que sur le corps d'une page entière.
Cet outil stocke-t-il ou envoie-t-il les arrière-plans que je crée ?
Non. Chaque dégradé et chaque motif est calculé et affiché localement dans votre navigateur avec JavaScript. Rien n'est envoyé à un serveur ni enregistré en dehors de votre appareil, sauf si vous copiez et collez vous-même le résultat.

Outils associés

Essayer

Formateur CSS

Formatez votre code CSS pour une meilleure lisibilité.

Essayer

Générateur de couleur aléatoire

Générez une couleur aléatoire.

Essayer

Générateur de dégradé

Générez un dégradé à partir de deux couleurs.

Essayer

Générateur de box-shadow CSS

Concevez des ombres CSS box-shadow personnalisées avec un aperçu en direct. Réglez le décalage, le flou, l'étendue et la couleur, empilez plusieurs couches et copiez le code.

Essayer

Générateur de triangle CSS

Créez des triangles CSS avec un aperçu en direct. Choisissez la direction, la taille et la couleur, la méthode border ou clip-path, puis copiez le code.

Essayer

Générateur de loader CSS

Créez des spinners de chargement CSS avec un aperçu en direct. Choisissez un style, réglez la taille, la couleur et la vitesse, puis copiez le CSS et le HTML prêts à l'emploi.

Commentaires

Les commentaires sont fournis par Disqus. Les charger vous connecte à Disqus, qui dépose des cookies et traite des données selon sa propre politique de confidentialité.

Créateur de fond CSS est maintenu par CodeItBro. Notre objectif est de proposer les meilleurs outils gratuits pour développeurs sur le web. Si vous avez des remarques ou des suggestions, rendez-vous sur notre page de contact.

Cité par

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge