Générateur d’ombres CSS

Créez des ombres douces à plusieurs couches et exportez le code CSS.

Code CSS

box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.1);

Calques

Calque 1

Calque 2

Paramètres d'aperçu globaux

Couleur d'arrière-plan

Paramètres des calques

Décalage X : 0px

Décalage Y : 1px

Flou : 3px

Diffusion : 0px

Opacité : 10%

Couleur

Encart

Préréglages prêts à l'emploi

Chute douce

Altitude moyenne

Flotteur élevé

Bordure croustillante

Bloc rétro

Profondeur intérieure

Lueur

Couches lisses

Couches profondes

Générateur d'ombres CSS ultime

Maîtrisez l'art de la profondeur avec notre Générateur d'ombre de boîte CSS. Que vous construisiez une interface Neumorphism, un tableau de bord SaaS épuré ou une carte Material Design, la superposition des ombres est la clé d'un look professionnel.

Que sont les ombres lisses ?

Les "ombres lisses" ou ombres superposées sont créées en empilant plusieurs règles box-shadow sur un seul élément. Une seule ombre crée souvent un bord artificiel et net. En utilisant 4, 6 ou même 8 couches d'ombres avec des rayons de flou croissants et une opacité décroissante, vous pouvez simuler une diffusion réaliste de la lumière (Occlusion ambiante).

Cas d'utilisation et mots-clés

Pour les développeurs

Déboguez et générez un Ombres de boîte CSS3 complexe sans écrire de code manuel. Parfait pour les projets React, Vue et Angular.

Pour les concepteurs

Traduisez les effets Figma sur le Web. Créez des éléments interface utilisateur logicielle, effets de lueur et des utilitaires d'ombre de vent arrière personnalisés.