Générateur d'ombre de texte (text-shadow)

Saisissez votre texte, réglez l'ombre avec les curseurs et copiez le code text-shadow. En combinant plusieurs calques, vous obtiendrez des effets néon, des lettres en 3D, des contours ou du texte en relief.

Comment fonctionne text-shadow

text-shadow accepte le décalage horizontal et vertical, le flou et la couleur de l'ombre : par exemple 2px 2px 4px rgba(0, 0, 0, 0.4). Contrairement à box-shadow, il n'a ni étendue ni inset, et il suit la forme de chaque lettre.

Comme pour box-shadow, on peut enchaîner plusieurs ombres séparées par des virgules ; la première est au-dessus. C'est ainsi que fonctionnent les exemples : le néon empile des ombres sans décalage et de plus en plus floues, la 3D additionne des ombres nettes décalées pixel par pixel et le contour place quatre ombres nettes autour de la lettre.

Lisibilité

Une ombre légère aide à lire un texte sur une photo, mais les ombres marquées sur de longs paragraphes fatiguent les yeux. Réservez-les aux titres et aux boutons, et vérifiez toujours le contraste entre le texte et le fond.