CSS-tekstschaduwgenerator

De CSS Text Shadow Generator is een visuele editor voor de eigenschap CSS Text-Shadow. Je past de horizontale offset, verticale offset, vervagingsstraal, kleur en dekking aan met schuifregelaars en bekijkt het effect live op voorbeeldtekst en kopieert vervolgens de exacte CSS. In plaats van pixelwaarden te raden en uw pagina te vernieuwen, vorm u de schaduw direct en leest u de code die het produceert.

Of u nu zoekt naar een CSS-tekstschaduwgenerator, een CSS-tool voor tekstschaduwgenerator of een CSS-schaduwtekstgenerator, de uitvoer is dezelfde enkele declaratie Klik op de Hard-preset en het vak Gegenereerde CSS toont tekstschaduw: 2px 2px 0px #0000099; dat is één zwarte laag met een dekking van 60%, waarbij de dekking in de laatste twee hexadecimale cijfers is geschreven Klik op Neon Glow en je krijgt drie door komma's gescheiden lagen met een onscherpte van 7px, 14px en 28px CSS kopieert de hele regel, inclusief puntkomma.

De tekst-schaduw eigenschap is eenvoudiger dan box-schaduw - het heeft geen spread radius en geen inset keyword - maar gelaagdheid is waar het krachtig wordt Een enkele declaratie kan verschillende schaduwen stapelen, elk met zijn eigen offsets, onscherpte, en kleur Stapelen lagen is hoe je neon glows, harde contouren, retro 3D belettering, boekdruk emboss effecten, en lange platte schaduwen bouwen Die met de hand schrijven is onhandig, dus deze tool beheert de lagen en voert een spec-valide, komma-gescheiden declaratie in de juiste verfvolgorde.

Alles gebeurt in uw browser. Kies een voorinstelling zoals neongloed of omtrek, stem elke laag af, wissel de preview tussen lichte en donkere achtergronden, bewerk de voorbeeldtekst en kopieer de CSS. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.

Laagvolgorde loopt eerst tot laat, van voor naar achter, dus de schaduw die als eerste wordt vermeld, zit er bovenop Dat is wat de contouren doet werken: vier kleine schaduwen compenseren één pixel in elke richting, gestapeld, benaderen een slag waarvoor CSS geen directe eigenschap heeft. Vervagingsradius is het dure onderdeel om weer te geven, en tekst met verschillende grote vervagingen die opnieuw op de rol zijn geschilderd, is een veel voorkomende oorzaak van jank op apparaten met een lager vermogen. Schaduwen hebben nooit invloed op de lay-out, zodat ze hun doos kunnen overlopen en kunnen worden geknipt door een ouder met verborgen overloop.