Softonic

Générateur d'ombre de texte CSS

Étape 1 / 2
Générer du CSS

Construire une déclaration text-shadow à l’œil dans DevTools fonctionne, mais cela devient de la conjecture dès que vous avez besoin d’un doux éclat néomorphique, d’une ombre portée rétro à deux couches ou d’un contour net de 1px sur un titre principal. Ce générateur vous permet de régler le décalage X, le décalage Y, le rayon de flou et une couleur RGBA et de copier une ligne CSS prête à coller.

Comment construire une ombre de texte

  1. 1

    Définir les décalages

    X est le décalage horizontal en pixels, Y est vertical. Un Y positif pousse l'ombre vers le bas, un Y négatif la pousse vers le haut.

  2. 2

    Choisir le rayon de flou

    Un flou de 0 donne une silhouette nette ; des valeurs plus élevées estompent l'ombre. Les ombres portées douces classiques utilisent 4 à 12px de flou.

  3. 3

    Choisir une couleur

    Utilisez une chaîne RGBA pour pouvoir ajuster l'opacité. `rgba(0,0,0,0.35)` est une valeur par défaut sûre pour une profondeur subtile sur des arrière-plans clairs.

  4. 4

    Copier la déclaration

    L'outil génère `text-shadow: Xpx Ypx Blurpx couleur;`, insérez-le dans le sélecteur correspondant de votre feuille de style.

Recettes d'ombre de texte qui ont vraiment fière allure

Une ombre de texte est la somme de quatre nombres et d’une couleur. Souvenez-vous de cela et vous pourrez recréer presque n’importe quel effet dans un magazine ou sur une page de destination.

Feuille de triche

Effet Déclaration
Profondeur subtile text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Ombre portée douce text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Contour 1px text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Double rétro text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Éclat néon text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Superposition de plusieurs ombres

text-shadow accepte une liste séparée par des virgules. Le navigateur applique l’algorithme du peintre et dessine dans l’ordre du code : la dernière ombre de la liste se retrouve derrière toutes les autres. Utilisez cela pour simuler des contours (quatre ombres nettes de 1px dans les quatre directions) ou pour créer de la profondeur en empilant une ombre proche nette et une ombre lointaine diffuse.

Quand éviter l’ombre de texte

  • Sur un très petit texte de corps, un flou supérieur à 2px rendra les glyphes flous. Préférez -webkit-font-smoothing et un contraste plus fort.
  • Pour les animations de section héros sensibles aux performances, évitez plus de trois ombres empilées ; chaque couche oblige le navigateur à re-rasteriser le texte.
  • Si vous avez besoin d’une ombre avec un décalage serré sur un chemin complexe (courbes, rotations), envisagez un <filter> SVG avec feDropShadow à la place, il suivra plus précisément le contour du glyphe.

Questions fréquentes

La sortie est une seule couche d’ombre par conception. Pour superposer des effets, exécutez le générateur plusieurs fois et enchaînez les résultats avec des virgules, par exemple text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow suit les contours des glyphes du texte rendu. box-shadow suit la boîte de bord rectangulaire de l’élément. Ils prennent des paramètres similaires mais rasterisent contre des formes complètement différentes.

Les navigateurs rasterisent les ombres de texte contre la grille de pixels de l’appareil. Une ombre avec un flou de 0 sur un affichage 2x sera rendue à des positions sous-pixels et peut sembler légèrement floue. Augmenter le flou à 1 nettoie généralement l’image sans changer le poids visuel.

Les valeurs que vous saisissez sont envoyées à notre serveur pour construire la déclaration, mais elles ne sont ni stockées ni réutilisées. Sur la vue en plusieurs étapes, elles transitent par le lien entre les étapes ; sur la vue en une seule étape, rien n’est conservé, rafraîchissez la page et tout est perdu.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues