Command Palette

Search for a command to run...

Générateur d'ombres de texte CSS

Concevez des ombres de texte CSS en couches avec un aperçu en direct et des curseurs pour les effets de décalage, de flou, de couleur et d'opacité - créez des effets de lueur, de contour, de rétro 3D et de gaufrage, puis copiez le CSS prêt pour la production.

Presets
Toolz
Shadow layers
Offset X0px
Offset Y0px
Blur7px
Opacity100%
Generated CSS
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Category:css
Mode:Offline
Version:1.0.0
Access:Free

Qu'est-ce que le générateur d'ombres de texte CSS ?

CSS Text Shadow Generator interface on Toolz.dev - Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready 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.

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é.

Comment utiliser le générateur d'ombres de texte CSS ?

1

Commencer à partir d'un calque prédéfini ou vierge

Choisissez un préréglage comme le doux, la lueur au néon, la 3D rétro ou le contour pour obtenir un point de départ réaliste, ou commencez par un seul calque d'ombre par défaut et accumulez à partir de là.

2

Réglez l'ombre avec des curseurs

Faites glisser les curseurs de décalage horizontal et vertical et de rayon de flou, puis définissez la couleur et l'opacité des ombres. Regardez l'exemple de mise à jour de texte instantanément au fur et à mesure de la modification.

3

Empilez plus de couches pour les effets

Ajoutez des couches supplémentaires pour créer de la lueur, un contour ou une profondeur 3 D - plusieurs copies offset d'une ombre lues comme du texte extrudé, tandis que des copies floues empilées lues comme une lueur.

4

Copiez le CSS

Copiez la déclaration Text-Shadow et collez-la directement dans vos styles de feuille de style ou de composant. Appliquez-le à n'importe quel élément de texte pour obtenir le même effet.

Principales caractéristiques

Ombres multicouches

Empilez un nombre de couches d'ombre dans une seule déclaration, dans le bon ordre de peinture de haut en bas, c'est-à-dire la façon dont le néon s'allume, les contours et le texte 3D sont construits

Contrôle des propriétés complet

Curseurs pour décalage horizontal et vertical et rayon de flou, ainsi qu'un sélecteur de couleurs et un contrôle d'opacité, couvrent chaque partie de la grammaire de texte-ombre

Aperçu en direct

Des exemples de mises à jour de texte instantanément au fur et à mesure de votre modification, et vous pouvez basculer son arrière-plan entre la lumière et l'obscurité pour vérifier comment l'effet est lu dans les deux thèmes.

Préréglages prêts à l'emploi

Des recettes douces, dures, néon, rétro 3D, contour, gaufrage, feu et ombre à longue durée vous donnent un point de départ éprouvé au lieu d'une toile vierge

Frequently Asked Questions

Text-Shadow ajoute une ou plusieurs ombres au texte d'un élément. Chaque ombre prend un décalage horizontal, un décalage vertical, un rayon de flou optionnel et une couleur. Plusieurs ombres sont séparées par des virgules et peintes avec la première en haut.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

text shadow generatorcss text shadowtext-shadow cssneon text cssglow text effecttext outline cssletterpress css3d text csscss text effectscss text-shadow generatortext shadow generator csscss shadow text generator