Générateur d'Ombres CSS
Construisez une ombre de boîte ou de texte à partir des décalages, du flou, de l'étalement et de la couleur, et voyez la place qu'elle réclame.
Résultats
Ce que fait cet outil
Une ombre de boîte, c'est quatre nombres et une couleur dans un ordre que personne ne retient, et la différence entre une ombre qui soulève la carte de la page et une qui ressemble à une tache tient généralement à l'un d'eux. Réglez les valeurs ici et la ligne revient prête à coller, avec la couleur transparente correctement écrite. Les chiffres de portée indiquent la place dont l'ombre a besoin autour de la boîte, ce qui décide de sa survie dans une grille serrée.
Formule
box-shadow prend décalage, flou, étalement et couleur ; text-shadow n'a ni étalement ni inset
Variables
| Symbole | Signification | Unité |
|---|---|---|
kind | Ombre sur | — |
x | Sur le côté | px |
y | Vers le bas | px |
blur | Flou | px |
spread | Étalement | px |
color | Couleur de l'ombre | — |
alpha | Son opacité | — |
inset | À l'intérieur plutôt qu'à l'extérieur | — |
OUT | Le CSS | — |
VA | Seulement la valeur | — |
RE | Jusqu'où elle s'étend | px |
RL | Place nécessaire à gauche | px |
RB | Place nécessaire en dessous | px |
CL | Couleur de l'ombre | — |
Exemple résolu
- Ombre surbox
- Sur le côté0 px
- Vers le bas4 px
- Flou12 px
- Étalement-2 px
- Couleur de l'ombre#17191f
- Son opacité0,18
- À l'intérieur plutôt qu'à l'extérieurno
- Le CSSbox-shadow: 0px 4px 12px -2px rgba(23, 25, 31, 0.18);
- Seulement la valeur0px 4px 12px -2px rgba(23, 25, 31, 0.18)
- Jusqu'où elle s'étend4,0 px
- Place nécessaire à gauche4,0 px
- Place nécessaire en dessous8,0 px
- Couleur de l'ombrergba(23, 25, 31, 0.18)
Questions fréquentes
Quelle différence entre flou et étalement ?
L'étalement agrandit l'ombre avant qu'elle ne soit floutée, comme si la boîte qui la projette avait grandi ; le flou adoucit ensuite le bord vers l'extérieur, à partir de là où cette forme s'arrête. Un étalement négatif est l'astuce derrière la plupart des bonnes ombres : il rentre la forme pour que le bord doux reste sous la boîte plutôt que de dépasser sur les côtés, ce qui fait qu'une carte semble soulevée plutôt que contournée. Les ombres de texte n'ont pas d'étalement.
Que dit le chiffre de portée ?
Jusqu'où l'ombre dépasse le bord de la boîte, c'est-à-dire l'espace à laisser autour. La moitié du flou plus l'étalement, ajusté par le décalage de chaque côté. Si la portée en dessous dépasse la marge sous votre carte, l'ombre sera rognée par ce qui suit, et le symptôme habituel est une ombre qui paraît bien seule et tronquée dans une grille.