Générateur de box shadow : empiler des ombres CSS
Copiez la ligne, collez-la dans la feuille de style, et la carte garde la même ombre que dans l’aperçu. Ce générateur de box shadow tient jusqu’à six couches dans une liste, dessine chaque changement sur une boîte et écrit la déclaration box-shadow complète. Le préréglage « Superposée » est actif dès le chargement de la page.
Ce que la ligne contient, et ce qu’elle laisse de côté
La première couche de la liste est dessinée au-dessus des autres, car CSS lit la liste séparée par des virgules dans cet ordre. L’outil ne trie rien. Les zéros perdent leur unité : un décalage de 0 devient 0 et non 0px. À 100 % d’opacité, la couleur sort en hexadécimal minuscule, par exemple #111827. En dessous, elle sort sous la forme rgb(0 0 0 / 15%).
Les couches masquées n’apparaissent pas. Si toutes le sont, le résultat est box-shadow: none;. L’outil n’ajoute aucun préfixe comme -webkit-.
Les bornes : le décalage et l’étendue vont de -100 à 100 px, le flou de 0 à 200 px, l’opacité de 0 à 100 % et le rayon de 0 à 100 px. Les valeurs sont des entiers, et un nombre hors plage est ramené au maximum quand vous quittez le champ. Le plafond est de six couches, et la dernière couche ne peut pas être supprimée. Les couleurs s’écrivent en hexadécimal à 3 ou 6 chiffres. Un nom comme red ou une valeur hsl() est refusé avec un message, et le champ revient à la dernière couleur valide.
Le calcul se fait en JavaScript dans votre navigateur. Un clic sur un bouton n’envoie aucune requête, et l’onglet Réseau le montre. Les boutons de copie écrivent dans le presse-papiers. Rien n’est enregistré : après un rechargement, le préréglage « Superposée » revient. L’aperçu est un carré fixe de 150 px, et sa zone coupe les grandes ombres au bord.
Sept préréglages pour démarrer
« Douce » est une seule grande ombre pâle sous une carte blanche. « Superposée » empile cinq couches avec 1, 2, 4, 8 et 16 px de décalage. « Décalage net » n’a aucun flou. Viennent ensuite « Intérieure (inset) », « Halo » sur fond sombre et deux variantes néomorphiques, en relief et enfoncée. Un préréglage change aussi la couleur de la boîte, celle de la page et le rayon.
Du curseur à la feuille de style
- Cliquez sur un préréglage, ou changez les valeurs de la première couche avec le curseur ou le champ numérique.
- « Ajouter une couche » crée une ombre. Les flèches changent l’ordre, le bouton de copie duplique la couche et la corbeille la supprime.
- Réglez « Couleur de la boîte », « Couleur de la page » et « Rayon des angles » selon votre maquette.
- « Copier le CSS » prend toute la déclaration, « Copier la valeur seule » ce qui suit les deux-points.
Foire aux questions (FAQ)
box-shadow, séparées par des virgules. Le générateur le fait avec « Ajouter une couche », jusqu’à 6 couches, et la première est dessinée au-dessus.