Générateur de box-shadow CSS
Créez visuellement des valeurs de box-shadow en CSS. Prévisualisez en temps réel et copiez le CSS généré.
box-shadow: 0px 8px 16px 0px #00000033;
Comment utiliser cet outil
- 1
Drag the X offset and Y offset sliders (each from -50px to 50px) to move the shadow horizontally and vertically.
- 2
Adjust the Blur slider (0px to 100px) to soften the edges, and the Spread slider (-50px to 50px) to grow or shrink the shadow.
- 3
Pick a shadow color with the color swatch; the live preview square updates as you change any control.
- 4
Copy the generated box-shadow declaration from the output box at the bottom and paste it into your stylesheet.
Qu'est-ce que le générateur de box-shadow CSS ?
La propriété box-shadow de CSS accepte un décalage horizontal, un décalage vertical, un rayon de flou, un rayon d'expansion et une couleur. On peut empiler plusieurs ombres pour des effets en couches. Ce générateur visuel produit le CSS pour n'importe quelle combinaison : utile pour les boutons, les cartes et les effets de profondeur.
Cas d'usage courants
Designing a soft elevation shadow for buttons or cards, then tuning Y offset and blur until the depth looks right.
Prototyping a Material-style shadow by stacking the value this tool outputs with a second hand-written shadow.
Generating a tight, low-blur shadow with negative spread for a crisp focus or hover state.
Getting an exact box-shadow string to paste into a Tailwind arbitrary value, CSS module, or inline style.
Teaching the difference between blur and spread by dragging each slider and watching the preview react.
Quickly matching a shadow from a design mockup by eyeballing offsets against the live preview square.
Questions fréquentes
Comment empiler plusieurs ombres ?▼
Quelle est la différence entre flou et expansion ?▼
Outils connexes
Convertisseur de couleur (HEX/RGB/HSL)
Convertissez des couleurs entre les formats HEX, RGB et HSL. Choisissez une couleur visuellement ou saisissez les valeurs manuellement.
Générateur de dégradés CSS
Créez des dégradés CSS linéaires et radiaux. Choisissez les couleurs visuellement et copiez le CSS généré.
Générateur de courbes d'accélération cubic-bezier
Créez des courbes d'accélération cubic-bezier pour CSS. Inclut des préréglages standard.
Générateur de palettes de couleurs
Générez des palettes de couleurs harmonieuses à partir de n'importe quelle couleur de base. Prend en charge les schémas complémentaires, analogues, triadiques et monochromatiques.
Générateur de border-radius CSS
Créez visuellement des valeurs complexes de border-radius en CSS. Contrôle indépendant de chaque coin.
Générateur de CSS clamp()
Générez des valeurs CSS fluides et responsives avec clamp(). Mise à l'échelle progressive entre des tailles minimale et maximale sur les plages de viewport.