Générateur d'ombre portée CSS
Composez des ombres portées CSS en couches avec des curseurs en direct pour le décalage, le flou, l'étalement, la couleur, l'opacité et le mode intérieur — prévisualisez sur un vrai élément et copiez le CSS prêt à coller instantanément.
box-shadow: —;
Tout se met à jour en direct dans votre navigateur — aucun téléversement, aucune inscription, entièrement gratuit.
À propos de Générateur d'ombre portée CSS
Le Générateur de Box Shadow CSS vous permet de concevoir des ombres portées visuellement plutôt que de deviner des valeurs dans le code. Faites glisser les curseurs de décalage horizontal et vertical, de rayon de flou, de rayon d'étalement, de couleur et d'opacité — avec un bouton d'inversion (inset) — et observez un véritable élément se mettre à jour en direct. Quand le rendu vous convient, copiez le CSS prêt à coller en un clic.
Les ombres d'interfaces modernes sont rarement une simple couche unique. Ce générateur prend en charge l'empilement de couches d'ombre : ajoutez, dupliquez, masquez ou supprimez des couches, et prévisualisez soit la couche sélectionnée seule, soit toutes les couches combinées. Superposer une ombre sombre et resserrée sous une ombre plus large et douce est précisément ce qui donne du relief aux cartes et boutons soignés.
Vous pouvez aussi styliser l'élément de prévisualisation lui-même — couleur de la boîte, rayon de bordure et arrière-plan du canevas — afin de juger l'ombre dans un contexte réaliste, y compris sur des surfaces sombres. Partez d'un préréglage, cliquez sur « Randomiser la couche » pour vous inspirer, et réinitialisez quand vous voulez repartir de zéro. Tout s'exécute dans votre navigateur.
Comment utiliser Générateur d'ombre portée CSS
- Ajustez les curseurs de décalage horizontal, décalage vertical, flou, étalement, couleur et opacité, et activez « Ombre intérieure (inset) » si vous voulez une ombre interne.
- Cliquez sur « Ajouter une couche » ou « Dupliquer la couche » pour empiler des ombres, et basculez le mode de prévisualisation entre « Cette couche » et « Toutes les couches » pour affiner chacune.
- Ajustez l'élément et le canevas — couleur de la boîte, rayon de bordure et arrière-plan — afin que la prévisualisation corresponde à votre design réel.
- Appliquez un préréglage ou utilisez « Randomiser la couche » si vous voulez un point de départ plutôt qu'un jeu de curseurs vierge.
- Copiez la règle CSS complète (ou juste la valeur) et collez-la dans votre feuille de style.