Générateur de box-shadow CSS gratuit

Dans l'ordre : inset (facultatif), décalage X, décalage Y, rayon de flou, rayon d'étendue et couleur. Un X positif déplace l'ombre vers la droite et un Y positif vers le bas. Un flou de 0 donne un bord net. Cet outil écrit toujours les quatre longueurs en px, puis la couleur.

Utilisez un petit décalage Y, un flou important et une faible opacité, avec une étendue proche de 0. Un bon point de départ ici : Y 6 px, flou 24 px et opacité 12 %, ce qui donne 0px 6px 24px 0px #0000001f. Ajoutez une seconde couche plus serrée pour plus de profondeur.

Le flou adoucit le bord de l'ombre : plus il est élevé, plus l'ombre se fond sur une zone large. L'étendue agrandit ou réduit l'ombre avant le flou : une étendue positive la rend plus grande que la boîte, une négative la rend plus petite. Ici, le flou va de 0 à 100 px et l'étendue de -50 à 50 px.

Cliquez sur Ajouter une couche d'ombre. Chaque couche reçoit un onglet et ses propres réglages, et le code les joint par des virgules, une par ligne. En CSS, la première ombre de la liste est dessinée au-dessus : la couche 1 se trouve donc au-dessus des autres.

Sélectionnez la couche et cochez Ombre interne. Le code ajoute le mot-clé inset et l'ombre est dessinée à l'intérieur de la boîte plutôt qu'à l'extérieur. Avec inset, une étendue positive épaissit l'ombre interne. Vous pouvez mélanger couches internes et externes dans une même règle.

Utilisez deux couches avec des décalages opposés : une sombre, par exemple #000000 à 15 % avec X et Y à 8 px, et une blanche à -8 px en pleine opacité. Donnez à l'élément et à son parent le même arrière-plan doux. La carte d'aperçu reste ici blanche, vérifiez donc le résultat sur votre page.

box-shadow suit la boîte de l'élément et ses coins arrondis, et prend en charge l'étendue et inset. Le filtre drop-shadow() suit la forme visible, comme un PNG transparent ou une icône SVG, mais n'a ni étendue ni inset. Cet outil écrit uniquement box-shadow.

Non. Une ombre n'occupe aucun espace : elle ne repousse pas les autres éléments et ne modifie pas la taille de la boîte. Un parent avec overflow: hidden peut la couper ; laissez donc de la marge autour de l'élément quand le flou ou le décalage est important.

L'outil ajoute l'opacité à la couleur sous forme de deux chiffres hexadécimaux, ce qui ne fonctionne qu'avec des codes hexadécimaux à 6 chiffres comme #1e293b. Les codes courts comme #fff, les noms de couleurs et rgba() produisent du CSS invalide et l'ombre disparaît. Un flou saisi inférieur à 0 ou une opacité supérieure à 100 a le même effet.

Pas directement, car la sortie est du CSS brut. Dans Tailwind, placez les valeurs dans une classe d'ombre arbitraire et remplacez chaque espace par un tiret bas, comme dans shadow-[0px_4px_12px_0px_#00000026], ou ajoutez la valeur complète comme ombre personnalisée dans votre thème.

Oui. Il est gratuit, sans compte et sans limite d'ombres ni de couches. Vos valeurs restent dans cet onglet et ne sont pas enregistrées : un rechargement rétablit l'ombre par défaut. Sur le site en ligne, Google Analytics comptabilise les clics sur Copier le CSS, jamais les valeurs des ombres.