{ freetool24 }
Developer Tools

Dégradés CSS et Box Shadows : Guide Visuel Complet

Maîtrisez les dégradés linéaires, radiaux, coniques et les box shadows multicouches en CSS — avec des patterns pratiques et des outils pour générer du code prêt pour la production.

7 min de lecture

Arrière-plan dégradé coloré sur un écran d'ordinateur portable

Les dégradés CSS et les box shadows comptent parmi les outils visuels les plus puissants — et les plus sous-utilisés — dans la boîte à outils d'un développeur web. Bien utilisés, ils apportent profondeur, hiérarchie et finition aux interfaces. Mal utilisés, ils donnent à tout l'air d'un site de 2009. Ce guide enseigne à la fois la mécanique et le bon goût.

Dégradés CSS

Dégradés linéaires

Le type de dégradé le plus courant. Passe d'une couleur à une autre en ligne droite.

/* De gauche à droite */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* En diagonale */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Plusieurs arrêts de couleur */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

/* Avec transparence */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));

/* Arrêt net (sans fondu) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

L'angle peut être exprimé en degrés (0deg = bas vers le haut, 90deg = gauche vers la droite) ou avec des mots-clés (to top, to right, to bottom-right).

Dégradés radiaux

Rayonnent vers l'extérieur depuis un point central.

/* Dégradé circulaire */
background: radial-gradient(circle, #667eea, #764ba2);

/* Elliptique (par défaut) */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* Centre positionné */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);

/* Effet projecteur */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);

Les dégradés radiaux sont parfaits pour les effets de projecteur, les halos lumineux et les vignettes.

Dégradés coniques

Tournent autour d'un point central — comme une roue chromatique ou un graphique en secteurs.

/* Roue chromatique */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* Segments de graphique en secteurs */
background: conic-gradient(
  #3b82f6 0% 35%,
  #8b5cf6 35% 60%,
  #10b981 60% 80%,
  #f59e0b 80% 100%
);

/* Motif en damier */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;

Texte en dégradé

L'un des effets d'interface modernes les plus populaires :

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Superposition de dégradés sur des images

Indispensable pour rendre un texte lisible sur des photos :

.hero {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
    url('hero.jpg');
  background-size: cover;
}

Utilisez notre générateur de dégradés CSS pour créer des dégradés visuellement avec un aperçu en temps réel et copier le CSS en un clic.

Box Shadows

La syntaxe de box-shadow

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
  • offset-x / offset-y — position de l'ombre (positif = droite/bas)
  • blur-radius — 0 = bord net, valeur plus élevée = plus doux
  • spread-radius — positif agrandit l'ombre, négatif la réduit
  • inset — dessine l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur

Ombres de base

/* Élévation subtile */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Ombre de carte */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

/* Ombre de grande modale */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

/* Ombre portée nette (sans flou) */
box-shadow: 4px 4px 0px #1e293b;

Ombres multicouches

Plusieurs ombres peuvent être empilées avec des virgules. C'est la clé pour des ombres réalistes :

/* Élévation Material Design */
box-shadow:
  0 2px 1px -1px rgba(0,0,0,0.2),
  0 1px 1px 0 rgba(0,0,0,0.14),
  0 1px 3px 0 rgba(0,0,0,0.12);

/* Superposition pour la profondeur */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07);

La deuxième approche répartit l'énergie de l'ombre sur plusieurs couches, créant une atténuation de profondeur plus naturelle.

Ombres en inset

Dessinent des ombres à l'intérieur de l'élément — idéales pour les états enfoncés et les champs de saisie :

/* État bouton enfoncé */
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Champ de saisie avec profondeur */
input {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* Halo intérieur verre dépoli */
.glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(0,0,0,0.2);
}

Ombres colorées

Les ombres n'ont pas à être noires. Les ombres colorées apportent de la vivacité :

/* Élévation colorée */
.btn-primary {
  background: #3b82f6;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Halo lumineux en mode sombre */
.card {
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

Transitions d'ombres fluides

Animez les ombres au survol pour des interactions satisfaisantes :

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

Combiner dégradés et ombres

Les interfaces les plus abouties utilisent dégradés et ombres ensemble :

.premium-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 6px -1px rgba(0,0,0,0.2),
    0 20px 40px -5px rgba(0,0,0,0.4);
}

.gradient-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}

.gradient-button:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  transform: translateY(-1px);
}

Outils pour aller plus vite

Les dégradés et les ombres obéissent à la même règle que tout bon design : la retenue. Une ombre ou un dégradé bien travaillé sublime un composant. Une douzaine en compétition ne crée que du bruit. Maîtrisez les techniques, puis utilisez-les avec intention.

Retour à tous les articlesParcourir les outils