Générateur d'ombre de boîte
Concevez visuellement les ombres de la boîte : décalages, flou, couleur, copiés au format CSS.
Comment utiliser Générateur d'ombre de boîte
- Définissez les décalages — X généralement 0, Y positif (la lumière vient d'en haut).
- Ajoutez du flou généreusement et de l'opacité avec parcimonie — des lectures douces et faibles semblent réelles.
- Ajustez l'étalement uniquement si l'ombre doit s'agrandir/rétrécir au-delà du contour de l'élément.
- Copiez le CSS — et envisagez de superposer une deuxième ombre plus serrée pour réalisme.
Qu'est-ce que Générateur d'ombre de boîte ?
Un générateur d'ombres de boîte transforme les curseurs en box-shadow CSS : décalage horizontal et vertical, rayon de flou, étendue et couleur/opacité, prévisualisé en direct — la syntaxe à quatre valeurs (box-shadow : 0 4px 12px rgba(0,0,0,0.15)) dont personne ne devine les chiffres du premier coup.
Les ombres sont la manière dont les interfaces utilisateur plates expriment la profondeur : une carte "flotte" au-dessus de la page exactement autant que son ombre l’indique. La différence entre amateur et poli réside presque toujours dans la douceur : les ombres réelles sont très floues, peu opaques et légèrement vers le bas ; les boîtes sombres et dures avec un petit flou crient par défaut.
À propos de Générateur d'ombre de boîte
Faites glisser les curseurs – décalage X/Y, flou, répartition, couleur et opacité – observez le rendu de l'ombre en direct et copiez le CSS quand cela vous convient.
Des recettes qui fonctionnent toujours : l'élévation subtile de la carte est 0 2px 8px rgba(0,0,0,0.1) ; un survol associe une ombre plus grande (0 8px 24px rgba(0,0,0,0.15)) avec un petit translationY ; la proéminence modale/popover prend 0 16px 48px rgba(0,0,0,0.2). L'intuition physique : une élévation plus élevée = un décalage Y plus grand + plus de flou + MOINS d'opacité — la lumière se propage à mesure que la distance augmente. Les ombres colorées (une lueur teintée par la marque sous un bouton) proviennent de l'échange du rgba noir contre la couleur de la marque à faible alpha.
La superposition est le mouvement professionnel pris en charge par la syntaxe : deux ou trois ombres séparées par des virgules (une serrée et sombre, une grande et faible) imitent la vraie lumière bien mieux que n'importe quelle ombre unique – les élévations de Material Design sont construites exactement de cette façon.