Box Shadow Generator

À propos de cet outil

Horizontal — positif déplace l'ombre vers la droite, négatif vers la gauche. Vertical — positif vers le bas, négatif vers le haut. Flou — des valeurs plus grandes créent des ombres plus douces et diffuses. Extension — positif agrandit l'ombre, négatif la réduit.

Activez inset pour créer des ombres intérieures. Ajoutez plusieurs ombres avec "+ Ajouter une ombre" — elles sont séparées par des virgules dans la sortie CSS, empilées de l'avant vers l'arrière.

Comment utiliser

1. Ajustez les curseurs Horizontal et Vertical pour définir le décalage de l'ombre.
2. Augmentez le Flou pour une ombre douce, ou mettez-le à 0 pour une ombre nette.
3. Utilisez l'Extension pour agrandir ou réduire la taille de l'ombre au-delà de l'élément.
4. Cliquez sur "+ Ajouter une ombre" pour superposer plusieurs ombres et obtenir des effets plus riches.

Cas d'utilisation

Les designers utilisent box-shadow pour la profondeur et l'élévation dans les composants carte. Les ombres inset créent des effets de bouton enfoncé. Plusieurs ombres superposées produisent un éclairage réaliste avec lumière ambiante et lumière principale.

Questions fréquentes

• Qu'est-ce que l'option inset ? — Les ombres inset apparaissent à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur. Elles sont utiles pour créer des effets de pression sur les champs de saisie et les boutons.
• Puis-je ajouter plusieurs ombres ? — Oui. Cliquez sur "+ Ajouter une ombre" pour ajouter une autre couche d'ombre. Toutes les ombres sont combinées en une seule déclaration box-shadow séparée par des virgules.
• Que fait une valeur d'extension négative ? — Une extension négative rétrécit l'ombre plus petite que l'élément. Combinée avec le décalage et le flou, cela crée une ombre subtile qui dépasse seulement d'un côté.