Developer

CSS BOX SHADOW

Create and preview CSS box shadows with offset X/Y, blur, spread, color, opacity, and inset controls.

Private by design No signup · Free

Shadow Layers

Layer 1

Inset

Offset X0

Offset Y0

Blur0

Spread0

Opacity100

Background

Shape

Presets

Shadow Library

No saved shadows yet.

Preview

CSS Output

Normal Hover

box-shadow: ...;

Animate Preview

Toggles between Normal and Hover shadow states to simulate a hover transition.

Frequently Asked Questions

Comment la créer ?

Bougez les contrôles : l'aperçu et le code vont en live.

C'est quoi inset ?

Ombre vers l'intérieur, pour les creux.

Plusieurs couches ?

Oui. Additionnez les ombres.

Gratuit ?

Oui.

How to Use

Mettez les valeurs

X, Y, flou, spread.

Choisissez la couleur

Couleur et opacité.

Copiez le code

CSS ou Tailwind.

How to Calculate

Les valeurs forment le string box-shadow.

À propos de cet outil

Outil qui donne de la profondeur aux boutons et cartes. Avec couches, inset et export Tailwind. Des ombres pro sans retenir le CSS. Gratuit.

Related Tools

Générateur Palettes

Générateur de Dégradés CSS

Formateur JSON

Générateur de Meta Tags

Générateur Schema

Générateur Open Graph

Générateur QR

Methodology & feedback

Figures run locally in your browser from the values you enter (page updated 2026-10-02). Estimates are educational only — verify finance, tax and health decisions with a qualified professional (see Disclaimer). Spotted an error? Report it via contact and we correct with a new update date.

Was this tool helpful?