Softonic

CSS-textskugggenerator

Steg 1 / 2
Generera CSS

Att ställa in en text-shadow-deklaration på ögonmått i DevTools fungerar, men det blir en gissningslek så fort du behöver ett mjukt neumorft sken, en tvålagers slagskugga i retrostil eller en skarp 1px-kontur på en stor rubrik. Med den här generatorn ställer du in X-offset, Y-offset, oskärperadie och en RGBA-färg och kopierar en färdig CSS-rad att klistra in.

Så bygger du en textskugga

  1. 1

    Ställ in offseten

    X är den horisontella förskjutningen i pixlar, Y är den vertikala. Ett positivt Y skjuter skuggan nedåt, ett negativt Y skjuter den uppåt.

  2. 2

    Välj oskärperadie

    Oskärpa 0 ger en skarp siluett; högre värden tonar bort skuggan. Vanliga mjuka skuggor använder 4–12 pixlar oskärpa.

  3. 3

    Välj en färg

    Använd en RGBA-sträng för att kunna justera opaciteten. `rgba(0,0,0,0.35)` är ett säkert standardval för subtil djup på ljusa bakgrunder.

  4. 4

    Kopiera deklarationen

    Verktyget genererar `text-shadow: Xpx Ypx Blurpx color;` – lägg den i motsvarande selektor i din stilmall.

Textskuggrecept som faktiskt ser bra ut

En textskugga är summan av fyra tal och en färg. Kom ihåg det, så kan du återskapa nästan vilken effekt som helst från en tidning eller en landningssida.

Fusklapp

Effekt Deklaration
Subtilt djup text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Mjuk slagskugga text-shadow: 0 4px 12px rgba(0,0,0,0.35);
1px-kontur text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Retro dubbel text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Neonsken text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Lager på lager av flera skuggor

text-shadow accepterar en kommaseparerad lista. Webbläsaren ritar enligt målaralgoritmen, i kodens ordning – den sista skuggan i listan hamnar bakom alla andra. Använd detta för att imitera konturer (fyra skarpa 1px-skuggor i de fyra riktningarna) eller för att bygga djup genom att stapla en skarp närskugga och en diffus fjärrskugga.

När du bör hoppa över textskugga

  • På väldigt liten brödtext gör en oskärpa över 2px att glyferna ser suddiga ut. Föredra -webkit-font-smoothing och starkare kontrast i stället.
  • Vid prestandakritiska hero-animationer bör du undvika fler än tre staplade skuggor; varje lager tvingar webbläsaren att rastrera om texten.
  • Om du behöver en skugga med tät offset längs en komplex bana (kurvor, rotationer), överväg ett SVG-<filter> med feDropShadow i stället – det följer glyfens kontur mer exakt.

Vanliga frågor

Resultatet är avsiktligt ett enda skugglager. För att stapla effekter kör du generatorn flera gånger och kedjar ihop resultaten med kommatecken – till exempel text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow följer glyfkonturerna i den renderade texten, medan box-shadow följer elementets rektangulära kantbox. De tar liknande parametrar men rastreras mot helt olika former.

Webbläsare rastrerar textskuggor mot enhetens pixelrutnät. En skugga med oskärpa 0 renderas på subpixelpositioner på en 2x-skärm och kan se lite mjuk ut. Att öka oskärpan till 1 brukar rätta till det utan att ändra den visuella tyngden.

Värdena du anger skickas till vår server för att bygga deklarationen, men de sparas eller återanvänds inte. I flerstegsvyn färdas de i länken mellan stegen; i enstegsvyn bevaras ingenting, uppdatera sidan så försvinner allt.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Oktal-till-decimal-omvandlare

Omvandla oktala tal (bas 8) till decimalvärden, med den fullständiga positionsformeln och en steg-för-steg-uppdelning.

Markdown-förhandsvisare

Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.

Verktyget finns på andra språk