Générateur d'ombres de texte CSS

Le générateur d'ombres de texte CSS est un éditeur visuel pour la propriété CSS Text-Shadow. Vous ajustez le décalage horizontal, le décalage vertical, le rayon de flou, la couleur et l'opacité avec les curseurs et regardez le rendu de l'effet en direct sur un exemple de texte, puis copiez le CSS exact. Au lieu de deviner les valeurs des pixels et de rafraîchir votre page, vous façonnez directement l'ombre et lisez le code qu'elle produit.

Que vous recherchiez un générateur d'ombres de texte CSS, un outil CSS générateur d'ombres de texte ou un générateur de texte d'ombres CSS, la sortie est la même déclaration unique Cliquez sur le préréglage Hard et la case CSS générée affiche l'ombre de texte : 2 px 2 px 0 px #0000099 ; qui est une couche noire à 60 % d'opacité, avec l'opacité écrite dans les deux derniers chiffres hexagonaux Cliquez sur Lueur néon et vous obtenez trois couches séparées par des virgules à 7 px, 14 px et 28 px de flou Copie CSS copie toute la ligne, semi-colon inclus.

La propriété text-shadow est plus simple que box-shadow - elle n'a pas de rayon d'étalement et pas de mot-clé en médaillon - mais la superposition est l'endroit où elle devient puissante Une seule déclaration peut empiler plusieurs ombres, chacune avec ses propres décalages, flou et couleur Les couches d'empilement sont la façon dont vous construisez des lueurs néon, des contours durs, des lettrages rétro 3 D, des effets de gaufrage typographique et de longues ombres plates L'écriture de celles à la main est bidouille, donc cet outil gère les couches et génère une déclaration valide et séparée par des virgules dans le bon ordre de peinture.

Tout se passe dans votre navigateur. Choisissez un préréglage comme le néon Glow ou Outline, ajustez chaque calque, basculez l'aperçu entre les arrière-plans clairs et sombres, modifiez l'exemple de texte et copiez le CSS. Aucun compte, aucun téléchargement, et il continue de fonctionner hors connexion une fois la page chargée.

L'ordre des calques s'exécute d'abord pour durer, d'avant en arrière, donc l'ombre répertoriée d'abord se trouve sur le dessus C'est ce qui fait que les contours fonctionnent : quatre petites ombres décalées d'un pixel dans chaque direction, empilées, se rapprochent d'un trait pour lequel CSS n'a aucune propriété directe Le rayon flou est la partie coûteuse à restituer, et le texte avec plusieurs grands flous repeints sur le défilement est une cause fréquente de farce sur les appareils de moindre puissance Les ombres n'affectent jamais la disposition, elles peuvent donc déborder de leur boîte et être clipsées par un parent avec débordement caché.