Générateur d’ombres CSS

Créer et copier une ombre

1. Modifiez les décalages horizontal et vertical, le flou, l’étalement, la couleur et l’opacité de chaque calque. Choisissez une ombre intérieure si elle doit apparaître dans la boîte.
2. Ajoutez, dupliquez ou déplacez des calques pour façonner le résultat. Gardez de 1 à 8 calques ; un champ incomplet ou hors des limites de cet éditeur efface le code actuel jusqu’à sa correction.
3. Examinez l’aperçu en mode Adapter ou à 100%, puis copiez la déclaration. Collez-la dans une règle CSS pour l’élément à mettre en forme.

Comprendre chaque calque

Des décalages horizontal et vertical positifs déplacent l’ombre vers la droite et vers le bas. Le flou adoucit son bord ; un flou nul laisse un bord net. L’étalement modifie sa taille plutôt que sa douceur.

L’opacité concerne la couleur de chaque ombre, pas toute la boîte. Une ombre à 50 pour cent reste exactement à 50 pour cent dans le code ; sa couleur n’est pas convertie en octet alpha arrondi.

Le premier calque est au premier plan dans sa catégorie de dessin. Les ombres extérieures restent derrière l’arrière-plan de la boîte, tandis que les ombres intérieures restent au-dessus de cet arrière-plan et sous la bordure. Déplacer les lignes ne permet pas de franchir ces catégories.

Les longueurs acceptent un point ou une virgule et jusqu’à deux décimales ; l’opacité en accepte une. Ces champs sont limités par l’éditeur et n’analysent pas toutes les expressions CSS valides. Le code généré utilise toujours le point décimal.

Expériences utiles avec les ombres

L’exemple initial combine une petite ombre douce de 0, 2, 4, 0 pixels et 12,5 pour cent d’opacité avec une ombre plus large de 0, 8, 16, -4 pixels à 20 pour cent. Chaque ligne correspond à une entrée de code.

Pour un effet net semblable à un contour, utilisez des décalages et un flou nuls ainsi qu’un étalement positif sur un calque extérieur. Cela reste une ombre, pas une propriété de bordure exportée.

Essayez un calque intérieur avec un flou nul et un décalage positif pour examiner son bord intérieur net. Changez la couleur de la surface et utilisez la vue à 100% sans modifier la déclaration d’ombre.

Comprendre ce que montre l’aperçu

Cet éditeur produit de 1 à 8 calques box-shadow sRGB en pixels CSS. Il n’importe pas de CSS, ne génère pas d’ombres de filtre drop-shadow, ne choisit pas de sélecteur et n’exporte ni feuille de style complète ni image.

La taille de la boîte, les couleurs opaques et le rayon des angles de l’aperçu ne servent que de contexte. La géométrie et l’arrière-plan de votre élément peuvent modifier l’aspect d’une même déclaration.

Adapter met tout l’aperçu à l’échelle. Utilisez la vue défilante à 100% pour l’examiner de plus près. L’espace d’aperçu est limité et peut rogner les extrémités du flou ; les navigateurs et les écrans ne produisent pas nécessairement des pixels identiques.

Une ombre transparente ou réduite à rien peut être valide mais invisible. Si ce navigateur ne peut pas afficher la déclaration actuelle, l’outil le signale au lieu de lui substituer un autre effet ; le code valide reste disponible à la copie.

Votre ombre reste dans la page

La modification des ombres et la génération du code s’effectuent localement sans téléverser ni enregistrer vos valeurs. La copie n’a lieu que si vous la choisissez. La politique générale de confidentialité du site reste applicable.