Générateur d’ombre portée
Box Shadow Generator
Compose des ombres de boîte et de texte en plusieurs couches avec un aperçu en direct, et rend le CSS.
Compose une ombre à partir de couches et l’émet en `box-shadow`, en `text-shadow` ou en filtre `drop-shadow()`. Ce qu’il vaut la peine de savoir, c’est qu’une seule couche n’est presque jamais juste : une vraie ombre est un terme de contact sombre et serré plus un terme ambiant large et léger, et une ombre unique ne peut être que l’un des deux. La page insiste là-dessus, et vous dit quelles parties d’une couche la propriété visée ne sait pas exprimer.
- Couche 1
- Couche 2
Préréglages
Les décalages croissent à peu près linéairement avec l’élévation et le flou avec sa racine carrée : c’est ce que produit réellement une source ponctuelle au-dessus d’un plan. L’opacité baisse à mesure que l’ombre grandit — la même occultation répartie sur plus de surface — et prendre cela à l’envers est ce qui fait ressembler les ombres réglées à la main à des taches.
CSS
box-shadow: 0px 1px 3px rgb(0 0 0 / 0.1), 0px 4px 8px -2px rgb(0 0 0 / 0.08);Comment s’en servir
Dites sur quoi elle va
`box-shadow` pour une carte ou un bouton, `text-shadow` pour du texte, `drop-shadow()` pour tout ce qui a une vraie transparence — une icône ou un PNG détouré. L’aperçu change en conséquence, vous regardez donc toujours la bonne chose.
Partez d’un préréglage
Ce sont des piles à deux couches où les décalages croissent linéairement avec l’élévation, le flou avec sa racine carrée, et l’opacité décroît à mesure que l’ombre s’étale. C’est ce dernier point que les gens prennent à l’envers à la main, et le prendre à l’envers est ce qui fait ressembler une ombre à une bavure.
Réglez la couleur de surface sur celle que vous avez vraiment
Une ombre réglée sur du blanc est trop faible sur une page grise et trop forte sur une page sombre. L’échantillon de surface est là pour que vous régliez contre le fond sur lequel le composant se posera réellement.
Ajustez les couches
Décalage, flou, étalement et couleur par couche, plus une case inset. Tapez la couleur au lieu d’utiliser l’échantillon quand il vous faut de l’alpha : les couleurs d’ombre sont presque toujours translucides, et le champ de couleur natif ne sait pas représenter cela.
Copiez la déclaration
Le nom de la propriété change avec la cible, donc ce que vous copiez est prêt à coller tel quel.
Questions fréquentes
Mon inset et mon étalement ont disparu quand j’ai changé de cible. Où sont-ils passés ?
Ils ont été abandonnés, et la page le dit au-dessus de la sortie. `text-shadow` n’a ni inset ni étalement dans sa grammaire : elle prend un x, un y, un flou et une couleur, point. `drop-shadow()` n’a pas davantage d’inset ni d’étalement. Les émettre quand même produirait une déclaration que le navigateur jette entièrement, ce qui est pire que de perdre la partie qui ne peut pas survivre.
Pourquoi l’échantillon de couleur ne correspond-il pas à ce que j’ai tapé ?
L’échantillon est un `<input type="color">`, qui ne comprend que `#rrggbb` et n’a aucune notion d’alpha. Il montre l’hexadécimal le plus approchant de ce que vous avez tapé, et c’est le champ texte qui fait foi. Modifiez le texte quand la valeur contient un alpha.
`drop-shadow()` n’est-il qu’un `box-shadow` plus lent ?
Non, il répond à une autre question. `box-shadow` suit la boîte de bordure, donc un PNG transparent reçoit un rectangle. `drop-shadow()` suit le canal alpha, donc il suit la forme réelle. Il coûte une passe de composition, et il ne sait faire ni inset ni étalement : servez-vous-en quand la forme compte, et de `box-shadow` sinon.
Combien de couches est-ce trop ?
Deux ou trois font tout ce dont une interface a besoin. Chaque couche est un flou de plus que le compositeur exécute à chaque peinture, et une ombre à six couches sur une liste de deux cents lignes est un coût mesurable en images par seconde sur un téléphone. C’est pour cela que les préréglages s’arrêtent à trois.
À alimenter depuis
Générateur d’arrondis
Border Radius Generator
Façonne chaque coin séparément, syntaxe à deux valeurs pour le squircle comprise, et rend le CSS.
Éditeur de courbe d’accélération
Easing Curve Editor
Ajuste une courbe cubic-bezier ou de ressort face à un aperçu animé et rend la fonction de temporisation CSS.
Bac à sable des filtres CSS
CSS Filter Playground
Empile flou, luminosité, saturation, teinte et ombre portée sur un échantillon et rend le CSS obtenu.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Générateur d’arrondis
Border Radius Generator
Façonne chaque coin séparément, syntaxe à deux valeurs pour le squircle comprise, et rend le CSS.
Bac à sable des filtres CSS
CSS Filter Playground
Empile flou, luminosité, saturation, teinte et ombre portée sur un échantillon et rend le CSS obtenu.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Générateur de dégradé CSS
CSS Gradient Builder
Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.