Boksskygger
Tilføj dybde med shadow-sm til shadow-2xl, brug shadow-inner til indlejrede effekter, og fjern skygger med shadow-none.
Boksskygger er en gratis Tailwind CSS Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Tailwind CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Skygger og visuel dybde
Box-shadow skaber en følelse af dybde og højde i flade grænseflader. De får elementer til at se ud, som om de svæver over siden, fremhæver brugerens fokus og viser hierarki. Tailwinds shadow-*-hjælpeklasser giver en omhyggeligt designet skala af box-shadow-værdier, der fungerer harmonisk sammen. Værdierne går fra den knap synlige shadow-sm til den markante shadow-2xl, så du har fuld kontrol over højden.
<!-- Shadow elevation scale -->
<div class="grid grid-cols-2 gap-6 p-8 bg-gray-50">
<div class="bg-white p-4 rounded-lg shadow-sm">shadow-sm</div>
<div class="bg-white p-4 rounded-lg shadow">shadow</div>
<div class="bg-white p-4 rounded-lg shadow-md">shadow-md</div>
<div class="bg-white p-4 rounded-lg shadow-lg">shadow-lg</div>
<div class="bg-white p-4 rounded-lg shadow-xl">shadow-xl</div>
<div class="bg-white p-4 rounded-lg shadow-2xl">shadow-2xl</div>
</div>Reference til shadow-hjælpeklasser
Hver skygge i Tailwinds skala er designet til et bestemt højdeniveau. shadow-sm (meget diskret, 1 px sløring) fungerer til inputfelter og små UI-elementer. shadow og shadow-md passer til kort og rullemenuer. shadow-lg er ideel til popovers og modale vinduer. shadow-xl og shadow-2xl er forbeholdt store modale vinduer, fuldskærmsoverlays og markante hero-elementer, der skal virke betydeligt hævet.
<!-- Semantic shadow usage by component type -->
<div class="space-y-4 max-w-sm">
<input class="w-full border border-gray-300 rounded-lg px-4 py-2 shadow-sm" placeholder="Input with shadow-sm" />
<div class="bg-white border rounded-xl p-4 shadow-md">Card with shadow-md</div>
<div class="bg-white rounded-2xl p-6 shadow-xl">Modal panel with shadow-xl</div>
</div>shadow-inner til indlejrede skygger
shadow-inner anvender en indadgående skygge, så et element ser forsænket eller trykket ned i overfladen ud. Det er den visuelle modsætning til almindelige skygger, der skaber højde. Almindelige anvendelser omfatter knaptilstande, hvor knappen er trykket ned, søgefelter, der viser, at de er aktive, konkave beholdere og spor i skiftekontakter, der skal se nedsænkede ud som kontrast til den hævede knap.
<!-- Inset shadow for recessed / pressed effects -->
<div class="flex gap-4">
<!-- Search input looking recessed -->
<div class="flex-1 bg-gray-100 rounded-lg px-4 py-3 shadow-inner flex items-center gap-2">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
</svg>
<span class="text-gray-400 text-sm">Search...</span>
</div>
<!-- Pressed button state -->
<button class="bg-gray-200 shadow-inner px-4 py-2 rounded-lg font-medium text-gray-700">
Pressed
</button>
</div>shadow-none til at fjerne skygger
shadow-none fjerner alle box-shadow-effekter fra et element. Det er nyttigt, når du skal tilsidesætte en nedarvet skygge, f.eks. når en kortskygge skal fjernes på mobilen, hvor kortet fylder hele bredden, og skyggen ser mærkelig ud ved skærmens kanter. Mønstret shadow-md md:shadow-lg bruger en mindre skygge på mobilen og en større på desktop, hvor svævende kort ser bedre ud.
<!-- Remove shadow on mobile, restore on tablet+ -->
<div class="bg-white p-4 rounded-none sm:rounded-xl shadow-none sm:shadow-lg">
<h3 class="font-bold">Responsive Card Shadow</h3>
<p class="text-gray-600 mt-1">No shadow on mobile, shadow on larger screens.</p>
</div>Farvede box-shadows
Tailwind v3 introducerede farvede skygger: shadow-blue-500 får skyggen til at fremstå blå. Det skaber levende, glødende effekter, som er populære i mørke temaer og på landingssider. Skyggefarven anvendes med CSS-variablen --tw-shadow-color, så du skal stadig bruge en størrelses-hjælpeklasse for shadow-* sammen med farveklassen — f.eks. shadow-lg shadow-blue-500/50.
<!-- Colorful glow effects with colored shadows -->
<div class="flex gap-6 p-8 bg-gray-900 justify-center">
<button class="bg-blue-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-blue-500/50">
Blue Glow
</button>
<button class="bg-purple-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-purple-500/50">
Purple Glow
</button>
<button class="bg-pink-500 text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-pink-500/50">
Pink Glow
</button>
</div>Mønster med kort, der løftes ved hover
Et af de mest almindelige interaktive mønstre er hover-løfteffekten: Et kort starter med en diskret skygge og får en dybere skygge ved hover, så det ser ud til at løfte sig. Kombiner shadow-md hover:shadow-xl med transition-shadow duration-300 for en jævn animation. Det signalerer til brugerne, at kortet er interaktivt, og får dashboards og produktlister til at virke gennemarbejdede.
<!-- Interactive card with hover-lift effect -->
<div class="grid grid-cols-3 gap-6 p-6">
<div class="bg-white rounded-xl p-5 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
<span class="text-blue-600">📊</span>
</div>
<h3 class="font-bold">Analytics</h3>
<p class="text-sm text-gray-500 mt-1">View your stats</p>
</div>
</div>Drop-shadow kontra box-shadow
Tailwind tilbyder både box-shadows (shadow-*) og drop-shadows (drop-shadow-*). Den vigtigste forskel er, at shadow-* anvendes på elementets afgrænsningsramme (rektanglet), mens drop-shadow-* er et CSS-filter, der følger elementets faktiske synlige form, også i gennemsigtige områder. drop-shadow-* er ideel til elementer med uregelmæssig form, f.eks. PNG-ikoner med gennemsigtige baggrunde.
<!-- Box shadow (rectangular) vs drop shadow (shape-aware) -->
<div class="flex gap-8 p-6 items-center">
<!-- Box shadow on transparent PNG -->
<div>
<p class="text-sm mb-2">shadow-lg (rectangular)</p>
<svg class="w-16 h-16 text-blue-500 shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
<!-- Drop shadow follows shape -->
<div>
<p class="text-sm mb-2">drop-shadow-lg (shape-aware)</p>
<svg class="w-16 h-16 text-blue-500 drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</div>
</div>Lagdeling af flere skygger
CSS understøtter flere skygger på ét element, men Tailwinds indbyggede hjælpeklasser giver kun én skygge pr. klasse. Hvis du vil have flere lag, skal du udvide Tailwinds tema i tailwind.config.js med en brugerdefineret skygge, der indeholder en kommasepareret liste over skyggedefinitioner. Det gør avanceret lagdeling mulig, f.eks. en elevationseffekt fra Material Design eller en diskret ydre glød kombineret med en indre definitionsskygge.
/* In tailwind.config.js */
module.exports = {
theme: {
extend: {
boxShadow: {
/* Layered: outer glow + standard shadow */
'glow-blue': '0 0 20px rgba(59,130,246,0.5), 0 4px 6px rgba(0,0,0,0.1)',
/* Material elevation --*/
'material': '0 2px 1px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1), 0 16px 24px rgba(0,0,0,0.06)',
}
}
}
}Skygger i mørk tilstand
Skygger bliver mindre synlige på mørke baggrunde, fordi de typisk bruger gennemsigtigt sort. I mørk tilstand bevarer farvede Tailwind-skygger — eller lysere skyggetoner — deres synlighed. Et almindeligt mønster er shadow-gray-700/50 i mørk tilstand for at skabe en synlig skygge mod en mørk overflade. Alternativt kan du bruge kanter i stedet for skygger på mørke baggrunde, fordi kanter forbliver synlige uanset baggrundens lysstyrke.
<!-- Shadow strategies for dark mode -->
<div class="bg-gray-900 p-8 rounded-xl space-y-4">
<!-- Standard shadow (invisible on dark bg) -->
<div class="bg-gray-800 p-4 rounded-lg shadow-xl">
Shadow barely visible
</div>
<!-- Colored shadow for dark mode -->
<div class="bg-gray-800 p-4 rounded-lg shadow-lg shadow-gray-700/70">
Shadow visible with colored tint
</div>
<!-- Border instead of shadow on dark bg -->
<div class="bg-gray-800 border border-gray-700 p-4 rounded-lg">
Border as separator on dark backgrounds
</div>
</div>Fokusskygge til tilgængelighed
Synlige fokusindikatorer er et krav i WCAG 2.1 AA's tilgængelighedsstandarder. Selvom Tailwinds ring-*-hjælpeklasser er den foretrukne moderne tilgang, kan box-shadows også fungere som fokusindikatorer. Mønstret focus:shadow-[0_0_0_3px_rgba(59,130,246,0.5)] skaber en blå glorie — i praksis det samme som ring-2 ring-blue-500, men ved hjælp af shadow-egenskaben for kompatibilitet med ældre browsere.
<!-- Accessible focus indicators using shadow and ring -->
<div class="flex gap-4 flex-wrap">
<!-- Using ring (preferred modern approach) -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Ring Focus
</button>
<!-- Using shadow for legacy support -->
<button class="bg-purple-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:shadow-[0_0_0_3px_rgba(168,85,247,0.5)]">
Shadow Focus
</button>
</div>Komplet skyggehierarki
I en virkelig brugergrænseflade skaber en ensartet tildeling af skygger et tydeligt visuelt hierarki. Brug en systematisk tilgang: shadow-sm til diskrete kanter på inputfelter, shadow-md til indholdskort, shadow-lg til rullemenuer, shadow-xl til sidepaneler og shadow-2xl til modale dialogbokse. Dette hierarki hjælper brugerne med at forstå rumlige relationer og se, hvilke elementer der er kontekstuelle, og hvilke der er primære.
<!-- Dashboard showing shadow hierarchy -->
<div class="bg-gray-100 p-6 space-y-4">
<!-- Page-level card: shadow-md -->
<div class="bg-white rounded-xl shadow-md p-5">
<h2 class="font-bold text-lg">Analytics Overview</h2>
<!-- Inline component: shadow-sm -->
<div class="mt-4 grid grid-cols-3 gap-3">
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">142</div>
<div class="text-xs text-gray-500">Users</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">94%</div>
<div class="text-xs text-gray-500">Uptime</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">38</div>
<div class="text-xs text-gray-500">Issues</div>
</div>
</div>
</div>
</div>Hurtigt tjek
Test din forståelse af begreberne i Tailwind CSS Mastery fra denne lektion.
Opsummering af lektionen
I denne lektion har du lært, at shadow-sm til shadow-2xl giver en højdeskala for dybde, at shadow-inner skaber et forsænket udseende til tilstande, hvor noget er trykket ned, og til søgefelter, og at farvede skygger som shadow-lg shadow-blue-500/50 skaber glødeffekter til mørke temaer. Næste gang ser vi på outline- og ring-hjælpeklasser til tilgængelige fokusindikatorer.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Boksskygger” gratis?
Ja — hele teksten til “Boksskygger” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Tailwind CSS Academy-kurset, skal du opgradere til CoddyKit PRO. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Boksskygger”?
Tilføj dybde med shadow-sm til shadow-2xl, brug shadow-inner til indlejrede effekter, og fjern skygger med shadow-none. Du øver dig i Tailwind CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Tailwind CSS Academy?
Der kræves ingen tidligere erfaring. Tailwind CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Boksskygger”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Tailwind CSS Academy-lektion?
Ja. Alle Tailwind CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.