text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;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 de propagation ni de mot clé encadré - mais la superposition est là où elle devient puissante. Une seule déclaration peut empiler plusieurs ombres, chacune avec ses propres décalages, flou et couleur. Les couches d'empilage sont la façon dont vous construisez des lueurs au néon, des contours durs, des lettrages 3D rétro, des effets de relief et de longues ombres plates. Les écrire à la main est délicat, de sorte que cet outil gère les couches et génère une déclaration spécifiquement 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.
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à.
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.
Ajoutez des calques supplémentaires pour créer des reflets, des contours ou des profondeurs 3D. Plusieurs copies décalées d'une ombre lue sous forme de texte extrudé, tandis que des copies floues empilées sont lues comme une lueur.
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.
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
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
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.
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
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!