Générateur d'ombre portée

Les décalages horizontal et vertical déplacent l'ombre à droite/gauche et vers le bas/haut de l'élément ; le rayon de flou adoucit son bord (0 donne un bord net, des valeurs plus élevées l'adoucissent) ; et le rayon d'étalement agrandit ou réduit la taille de l'ombre avant l'application du flou. Un étalement négatif rentre l'ombre, ce qui est pratique pour des effets de relief subtils.

Ajoutez une autre couche — le CSS permet d'empiler un nombre illimité d'ombres sur un même élément en les séparant par des virgules. La première couche de la liste est peinte au-dessus. Empiler une ombre serrée et sombre sur une ombre large et douce est une façon courante d'obtenir un effet de profondeur réaliste.

Activez « Intérieure » pour dessiner l'ombre à l'intérieur de la boîte de bordure de l'élément plutôt qu'à l'extérieur, ce qui donne à la surface un aspect enfoncé ou en creux. Vous pouvez mélanger des couches intérieures et extérieures sur le même élément.

Non. Tout fonctionne dans votre navigateur — l'aperçu et le CSS généré sont calculés localement et rien de ce que vous ajustez n'est envoyé à un serveur. Copiez le code et collez-le directement dans votre feuille de style.