Design

Générateur d'ombre de boîte CSS

Concevoir des ombres de boîte visuellement.

Comment utiliser

Commencez par un préréglage ou un calque, puis ajoutez des calques pour la profondeur. Activez l'encart pour les effets enfoncés/neumorphes. Copiez la valeur séparée par des virgules dans box-shadow.

FAQ

Puis-je empiler plusieurs ombres ?

Oui — ajoutez des couches pour associer une ombre ambiante douce à une ombre de contact nette, ou empilez des lueurs colorées. Chaque couche possède son propre décalage, flou, étalement, couleur et option inset.

À quoi servent les préréglages ?

Points de départ en un clic : élévation de carte de style Stripe, néomorphisme en relief ou enfoncé, profondeur Material et lueur douce — ajustez les curseurs après application.

Comment utiliser la sortie ?

Copiez la ligne box-shadow dans votre CSS. Les différentes couches sont séparées par des virgules, exactement comme l’attendent les navigateurs.

Dernière mise à jour: