☁️

css-box-shadow-generator,

Générateur de CSS box-shadow

Générez des ombres CSS avancées (box-shadow) avec une interface utilisateur intuitive.
Un outil gratuit qui prend en charge plusieurs couches et les dernières tendances de conception.

🥞

Multicouche

Empilez plusieurs ombres pour des expressions riches

🎨

Préréglages inclus

Appliquez instantanément le Neumorphisme, etc.

⚡

Support Tailwind

Prend en charge les sorties CSS standard et Tailwind

Paramètres des couches

Paramètres de l'ombre

Décalage X (px) 0px

Décalage Y (px) 4px

Flou (px) 12px

Étalement (px) 0px

Couleur de l'ombre

Opacité (%) 10%

Ombre interne (inset)

Aperçu

BOX

Width

120px

Height

120px

Border Radius

12px

Couleur de fond

Couleur de la boîte

À propos

Le générateur de CSS box-shadow est un outil gratuit qui crée des styles d'ombre essentiels (box-shadow) pour la conception Web avec une interface utilisateur intuitive.

Non seulement les ombres simples, mais aussi les ombres riches à plusieurs couches, les ombres lisses comme celles utilisées par Apple et les services Web modernes, le Neumorphisme 3D et le Neo Brutalisme plat peuvent être créés instantanément à partir de préréglages.

Le code généré peut être produit dans trois formats : propriétés CSS standard, variables CSS (propriétés personnalisées) et classes d'utilitaires Tailwind CSS (prend en charge les valeurs arbitraires), et peut être copié en un seul clic.

Comment utiliser

1 Choisir une base

Choisissez un préréglage en haut qui se rapproche de l'image que vous souhaitez créer. Bien sûr, vous pouvez également construire à partir de zéro en ajoutant des couches.

2 Ajuster les ombres

Ajustez les décalages X/Y (position), la force de flou, l'étalement, la couleur et l'opacité. En empilant plusieurs ombres avec "Ajouter une couche", vous pouvez créer des ombres plus naturelles et luxueuses.

3 Copier le code

Sélectionnez "CSS" ou "Tailwind" dans le panneau de sortie selon votre environnement, et appuyez sur le bouton presse-papiers pour copier le code.

Propriétés

Syntaxe et propriétés de box-shadow


box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y: La position horizontale et verticale de l'ombre. Les valeurs positives déplacent l'ombre vers la droite/le bas, les valeurs négatives la déplacent vers la gauche/le haut.
blur-radius (flou): Le flou de l'ombre. Plus la valeur est grande, plus l'ombre s'étend et s'éclaircit. À 0, elle devient une limite nette (ombre solide).
spread-radius (étalement): Agrandit ou réduit la taille de l'ombre elle-même. Les valeurs positives entraînent une ombre plus grande que l'élément, les valeurs négatives entraînent une ombre plus petite.
inset (ombre interne): Lorsque ce mot-clé est spécifié, l'ombre tombe à l'intérieur de l'élément plutôt qu'à l'extérieur. Utilisé pour exprimer des interfaces utilisateur en creux.

FAQ

Q. Est-ce que box-shadow affecte les performances ?

A.Les grandes ombres floues et les couches multiples sont coûteuses à dessiner, de sorte que le rendu peut devenir lent sur les appareils mobiles. Une attention particulière est nécessaire lors de l'animation de box-shadow.

Q. Quelle est la différence entre box-shadow et filter: drop-shadow ?

A.box-shadow applique une ombre à la boîte (rectangle) de l'élément. D'autre part, filter: drop-shadow() génère une ombre pour la forme opaque de l'élément (comme le contour d'un PNG transparent).

Q. Dans quelles expressions utilise-t-on inset ?

A.Il est utilisé pour l'état enfoncé des boutons (effet de creux), les ombres internes des champs de texte, le dessin de surbrillance dans le Neumorphisme, etc.

Q. Quels sont les avantages d'empiler plusieurs ombres ?

A.L'empilement de plusieurs couches peut exprimer une profondeur plus naturelle et réaliste qu'une seule ombre floue. Par exemple, l'empilement d'une ombre proche (petite et sombre) et d'une ombre lointaine (grande et claire) est une technique courante.

Cas d'utilisation

Interfaces de cartes et modales

Fait ressortir les éléments de l'arrière-plan, indiquant visuellement à l'utilisateur qu'il s'agit d'éléments cliquables ou d'un contenu important.

États de survol/actifs des boutons

En prolongeant l'ombre au survol de la souris ou en passant à `inset` au clic, vous pouvez implémenter un bouton interactif avec une sensation de pression.

Conception Neumorphisme

En plaçant une ombre claire et une ombre sombre en diagonale sur un élément de la même couleur que l'arrière-plan, vous créez une texture qui donne l'impression que l'élément est repoussé ou en retrait.

Effet de lueur

En réglant le décalage sur 0 et en l'étalant avec des couleurs vives, vous pouvez obtenir un effet comme si l'élément émettait de la lumière en utilisant uniquement CSS.