CSS Tekstskyggegenerator
Gratis online tekstskyggegenerator. Stabble flere skyggelag med forskyvning, uskarphet, farge og gjennomsiktighet, prøv forhåndsinnstillinger som Neon, 3D, Retro og kopier CSS-koden med en gang.
Hva er CSS-egenskapen text-shadow?
text-shadow legger til skyggeeffekter på tekstens glyfer. Hver skygge defineres av en horisontal forskyvning, en vertikal forskyvning, en valfri uskarphet-radius og en farge, og flere skygger kan kombineres i én kommaseparert verdi for rike effekter.
Hvordan fungerer flere skyggelag?
Lagene tegnes nedefra og opp i deklarasjonsrekkefølge, så første skygge i listen ligger øverst. Denne generatoren lar deg legge til, fjerne, aktivere og deaktivere lag, hvert med egen forskyvning, uskarphet, farge og gjennomsiktighet, for å stable effekter som Neon eller 3D.
Hva betyr forskyvning X, forskyvning Y og uskarphet?
Forskyvning X flytter skyggen til venstre eller høyre for glyfene, forskyvning Y opp eller ned, og uskarphet-radien mykner kantene: 0 gir en hard kant som i Retro eller Kontur, større verdier sprer fargen som en glød.
Hvordan lager jeg en neonlyseffekt?
Bruk forhåndsinnstillingen Neon eller sett opp flere lag med null forskyvning, samme sterke farge og økende uskarphetverdier, f.eks. 0 0 3px, 0 0 8px og 0 0 20px. Stablede haloer etterligner lyset fra et neonslang.
Påvirker text-shadow ytelsen ved visning?
Noen statiske lag er billige, men tekst med mange store uskarpe skygger er dyrere å tegne opp igjen. Tunge skygger på lange avsnitt eller kontinuerlig text-shadow-animasjon kan gi tapte bilder på svake og mobile enheter; foretrekk korte overskrifter, moderat uskarphet, eller animer gjennomsiktighet i stedet.
Hvordan gjør jeg en skygge halvtransparent?
Hvert lag har en gjennomsiktighetsglider som gjør om valgt farge til rgba-notasjon, f.eks. rgba(0, 0, 0, 0.5). Halvtransparente skygger smelter naturlig med enhver bakgrunn, slik Papir-forhåndsinnstillingen bruker det til en myk boktrykkslook.
Hva er forskjellen mellom text-shadow og box-shadow?
text-shadow virker på tekstens glyfformer og har ingen sprednings- eller innfeltverdier, mens box-shadow omgir en hvilken som helst elements rektangulære boks. De deler forskyvnings- og uskarphetsyntaksen, men kan ikke erstatte hverandre.
Hvilke nettlesere støtter text-shadow?
text-shadow støttes av alle moderne nettlesere, inkludert Chrome, Firefox, Safari, Edge og Opera, og har vært stabilt uten prefiks i over et tiår. Skygger med flere lag fungerer likt overalt.
Blir det jeg skriver sendt til en server?
Nei. Forhåndsvisningsteksten og alle lagene du konfigurerer blir i nettleseren din, og CSS genereres lokalt på siden. Ingenting sendes over nettverket, så verktøyet fungerer også frakoblet etter lasting.
Slik bruker du CSS Tekstskyggegenerator
Design tekstskygger i CSS ved å stable lag i stedet for å gjette én enkelt forskyvning. Hver endring rendres på stor forhåndsvisningstekst i sanntid, og CSS-en genereres lokalt i nettleseren din.
- Skriv dine egne ord i feltet Forhåndsvisningstekst for å teste effekten på ekte tekst.
- Prøv en forhåndsinnstilling: Neon, Papir, 3D, Retro, Glød eller Kontur laster ferdige lag.
- Juster hvert lags Forskyvning X, Forskyvning Y, Uskarphet, Farge og Dekkevne med dets glidebrytere.
- Bruk Legg til lag for å stable flere skygger, fjern haken ved et lag for å deaktivere det, eller slett det med søppelkasse-ikonet.
- Kopier den genererte text-shadow-regelen og lim den inn i stilarket ditt.
Neonglød ser best ut med tre eller fire lag av samme farge og økende uskarphet — hold forskyvningene på null og la uskarpheten gjøre jobben.
Relaterte verktøy
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Lag vakre skygger visuelt med justerbar forskyvning, uskarphet, spredning, farge og innfelt. Live forhåndsvisning og umiddelbar kodekopiering.
- CSS-gradientgenerator Lag fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere fargestopp, vinkler og posisjoner. Kopier produksjonsklar CSS-kode umiddelbart.
- Kule Tekst Generator Gratis generator for kule tekster med 28 Unicode-stiler. Lag fet, kursiv, gotisk og sirklet tekst for Instagram-bio, TikTok, WhatsApp og spillnavn.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 håndtak eller velg en blob-forhåndsinnstilling for å lage organiske CSS-former og kopiere koden umiddelbart.
- Fargekonverterer Gratis online fargekonverterer. Konverter HEX, RGB, HSL, HSV formater umiddelbart med visuell velger. 100% privat, kjører i nettleseren din.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunktene på en interaktiv kurve, velg blant 18 forhåndsinnstillinger, se en loope ballanimasjon og kopier tidsfunksjonen med en gang.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formgi polygon-, sirkel-, ellipse- og insett-former med flyttbare punkter, forhåndsvisning og CSS-kode med ett klikk.
- CSS-forskønner Formater og forskjønn CSS-kode umiddelbart. Konverter minifisert CSS til lesbar kode med tilpassbare alternativer.