Générateur de box-shadow CSS

Concevoir des ombres CSS box-shadow avec un éditeur visuel.

Preview

Shadow 1

Inset

X: 4px

Y: 4px

Blur: 15px

Spread: 0px

Color:

Radius:12px

box-shadow: 4px 4px 15px 0px #00000025;

How to Use

1
Use the sliders to adjust the shadow offset, blur, spread, and color.
2
Add more shadow layers with the Add Shadow button for complex multi-layer effects.
3
Copy the CSS box-shadow code and paste it directly into your stylesheet.

Stack multiple box-shadow layers to create complex, realistic drop shadow effects.

Toggle inset mode to place shadows inside the element for pressed or embossed effects.

Adjust X/Y offset, blur radius, spread radius, and color independently for each layer.

Copy the complete box-shadow CSS property value ready to paste into your code.

Oui, ajustez offset, blur, spread et couleur de chaque couche.

Apparaît à l'intérieur de l'élément, créant un effet enfoncé.

Générateur de gradient CSS

Créer de beaux gradients CSS avec un constructeur visuel.

Vérificateur de contraste

Vérifier les ratios de contraste WCAG entre couleurs d'avant-plan et d'arrière-plan.

Convertisseur de couleurs

Convertir des couleurs entre HEX, RGB et HSL avec un sélecteur visuel.