box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);
Ce que ça fait
Conçoit des valeurs CSS box-shadow à plusieurs couches, avec aperçu en direct et sortie prête à copier. Chaque couche porte les cinq propriétés standard - décalage X, décalage Y, flou, étalement, couleur - plus une bascule inset et un curseur d’opacité 0-1 dont la valeur est composée dans une couleur rgba() au moment de la génération. Empilez autant de couches que nécessaire ; elles sont jointes par des virgules dans l’ordre de sortie, exactement comme CSS l’attend.
Cinq préréglages en un clic (Soft, Sharp, Elevated, Inner, Glow) remplacent les couches courantes par des combinaisons éprouvées - des valeurs par défaut à une couche, plus une pile « Elevated » à deux couches. La scène d’aperçu rend votre ombre sur une boîte arrondie dont vous contrôlez la couleur, sur un fond au choix uni, damier ou scindé, pour juger l’opacité. 100 % côté client.
Comment l’utiliser
- Cliquez sur un préréglage dans la barre d’outils pour partir d’une ombre connue et fiable, ou éditez directement la couche douce initiale. Reset revient à la couche douce unique par défaut.
- Dans la scène, choisissez le fond d’aperçu (uni / damier / scindé) et réglez la couleur de la boîte avec le sélecteur.
- Pour chaque section Couche, réglez les contrôles :
- Inset - dessine l’ombre à l’intérieur de la boîte au lieu de l’extérieur.
- Couleur - la couleur de base de la couche (sélecteur, hex).
- Décalage X / Décalage Y - position en pixels ; les valeurs négatives sont valides.
- Flou - rayon de flou en pixels (min 0).
- Étalement - agrandit ou contracte l’ombre ; les valeurs négatives la resserrent.
- Opacité - curseur 0-1, fondu dans la couleur
rgba()émise.
- Cliquez sur Ajouter une couche pour empiler une autre ombre (ex. une ombre de contact serrée sous une ombre ambiante large). Supprimez des couches avec le bouton corbeille de chaque section - la dernière couche ne peut pas être supprimée.
- Regardez l’aperçu en direct se mettre à jour pendant l’édition.
- Cliquez sur Copier sur la sortie CSS pour récupérer la déclaration finie.
Exemples
Vérifié en exécutant buildBoxShadow() de src/lib/boxShadow.ts sur les valeurs de couches exactes que les cinq préréglages installent :
Soft (aussi l’état initial de l’outil)
box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);Elevated - deux couches, contact serré + ambiance large :
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 12px 28px -6px rgba(0,0,0,0.28);Inner
box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.35);Glow - ombre colorée, sans décalage :
box-shadow: 0px 0px 24px 2px rgba(59,130,246,0.45);Sharp : box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);
Bon à savoir
- Privé : la génération est locale ; rien n’est envoyé.
- Les couches sont émises jointes par des virgules dans l’ordre de la liste - la première couche se peint au-dessus en CSS, donc l’ordre compte visuellement.
- L’opacité s’applique par couche via
rgba(), donc vous pouvez mélanger une ombre de contact noire dense avec un halo coloré ténu dans une seule déclaration. - Le fond scindé montre votre ombre contre une moitié claire et une moitié sombre à la fois - le moyen le plus rapide de vérifier une ombre qui doit fonctionner sur les deux thèmes.
- Un étalement négatif (
-4px,-6pxdans les préréglages) empêche un grand flou de déborder des bords de la boîte. - Outils liés : CSS Gradient Generator, Glassmorphism Generator, Color Picker & Converter