CSS Text-shadow Generator
Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.
Wat is de CSS-eigenschap text-shadow?
text-shadow voegt schaduweffecten toe aan de glyphs van tekst. Elke schaduw wordt gedefinieerd door een horizontale offset, een verticale offset, een optionele vervagingsstraal en een kleur, en meerdere schaduwen kunnen in één kommaggescheiden waarde worden gecombineerd voor rijke effecten.
Hoe werken meerdere schaduwlagen?
Lagen worden van onder naar boven getekend in de volgorde van declaratie, dus de eerste schaduw in de lijst staat bovenop. Deze generator laat je lagen toevoegen, verwijderen, in- en uitschakelen, elk met eigen offset, vervaging, kleur en dekking, om effecten als Neon of 3D te stapelen.
Wat betekenen offset X, offset Y en vervaging?
Offset X verschuift de schaduw links of rechts van de glyphs, offset Y omhoog of omlaag, en de vervagingsstraal verzacht de randen: 0 geeft een harde rand zoals bij Retro of Omlijning, grotere waarden spreiden de kleur als een gloed.
Hoe maak ik een neon-gloedeffect?
Gebruik de Neon-preset of configureer meerdere lagen met offset nul, dezelfde felle kleur en oplopende vervagingswaarden, bijvoorbeeld 0 0 3px, 0 0 8px en 0 0 20px. Gestapelde halo's simuleren het licht van een neonbuis.
Beïnvloedt text-shadow de weergaveprestaties?
Enkele statische lagen zijn goedkoop, maar tekst met veel sterk vervaagde schaduwen is duurder om te hertekenen. Zware schaduwen op lange alinea's of text-shadow continu animeren kan frames kosten op zwakke en mobiele apparaten: kies korte koppen, gematigde vervaging of animeer de dekking.
Hoe maak ik een schaduw semi-transparant?
Elke laag heeft een dekkingsregelaar die de gekozen kleur naar rgba-notatie omzet, bijvoorbeeld rgba(0, 0, 0, 0.5). Semi-transparante schaduwen mengen vanzelf met elke achtergrond, zoals de Papier-preset gebruikt voor een zachte letterpress-look.
Wat is het verschil tussen text-shadow en box-shadow?
text-shadow werkt op de glyphs van tekst en heeft geen spread- of inset-waarden, terwijl box-shadow de rechthoekige box van elk element omringt. Ze delen de offset- en vervagingssyntaxis, maar kunnen elkaar niet vervangen.
Welke browsers ondersteunen text-shadow?
text-shadow wordt door alle moderne browsers ondersteund, waaronder Chrome, Firefox, Safari, Edge en Opera, en is al ruim tien jaar stabiel zonder voorvoegsel. Schaduwen met meerdere lagen werken overal gelijk.
Wordt wat ik typ naar een server gestuurd?
Nee. De voorbeeldtekst en alle lagen die je instelt blijven in je browser en de CSS wordt lokaal op de pagina gegenereerd. Er gaat niets over het netwerk, dus de tool werkt na het laden ook offline.
Hoe CSS Text-shadow Generator te gebruiken
Ontwerp CSS-tekstschaduwen door lagen te stapelen in plaats van één offset te gokken. Elke wijziging rendert op grote live voorbeeldtekst, en de CSS wordt lokaal in je browser gegenereerd.
- Typ je eigen woorden in het veld Voorbeeldtekst om het effect op echte tekst te testen.
- Probeer een preset: Neon, Papier, 3D, Retro, Gloed of Omlijning laadt kant-en-klare lagen.
- Stel Offset X, Offset Y, Vervaging, Kleur en Dekking van elke laag in met zijn schuiven.
- Gebruik Laag toevoegen om meer schaduwen te stapelen, vink een laag uit om hem uit te schakelen, of verwijder hem met het prullenbakpictogram.
- Kopieer de gegenereerde text-shadow-regel en plak hem in je stylesheet.
Neongloed werkt het beste met drie of vier lagen van dezelfde kleur en toenemende vervaging — houd de offsets op nul en laat de vervaging het werk doen.
Gerelateerde tools
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Maak visueel prachtige schaduwen met instelbare offset, blur, spread, kleur en inset. Live voorbeeld en directe code kopiëren.
- CSS-gradiëntgenerator Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
- Fancy Tekst Generator Gratis fancy tekstgenerator met 28 Unicode-stijlen. Maak vette, cursieve, gotische en omcirkelde tekst voor Instagram-bio, TikTok, WhatsApp en gamenamen - kopieer met één klik.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Clip-path Generator Gratis online CSS clip-path generator. Ontwerp polygon-, circle-, ellipse- en inset-vormen met sleepbare punten, live voorbeeld en CSS-code kopiëren met één klik.
- CSS Beautifier Formatteer en verfraai CSS-code direct. Converteer gecomprimeerde CSS naar leesbare code met aanpasbare opties.