Skygger
Gi dybde med shadow-sm til shadow-2xl, bruk shadow-inner for innfelte effekter, og fjern skygger med shadow-none.
Skygger er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Skygger og visuell dybde
Boksskygger skaper en følelse av dybde og høyde i flate grensesnitt. De får elementer til å se ut som om de svever over siden, trekker brukerens blikk og viser hierarki. Tailwinds shadow-*-hjelpeklasser tilbyr en nøye utformet skala av boksskygger som fungerer harmonisk sammen. Verdiene går fra den knapt merkbare shadow-sm til den markante shadow-2xl, slik at De får full kontroll over høydenivået.
<!-- 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>Referanse for skyggehjelpeklasser
Hver skygge i Tailwinds skala er utformet for et bestemt høydenivå. shadow-sm (svært diskret, 1 px uskarphet) passer til inndatafelt og små UI-elementer. shadow og shadow-md passer til kort og rullegardinmenyer. shadow-lg er ideell for popover-elementer og modaler. shadow-xl og shadow-2xl bør reserveres for store modaler, fullskjermsoverlegg og markante hero-elementer som skal fremstå som betydelig hevet.
<!-- 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 for innfelte skygger
shadow-inner legger en skygge innover, slik at et element ser ut som om det er forsenket eller trykket inn i overflaten. Dette er den visuelle motsetningen til vanlige skygger som angir høyde. Vanlige bruksområder er nedtrykte knappetilstander, søkefelt som skal vise at de er aktive, konkave beholdere og spor for brytere som skal se nedsenkede ut i kontrast til den hevede knappen.
<!-- 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 for å fjerne skygger
shadow-none fjerner alle boksskygger fra et element. Dette er nyttig når De må overstyre en nedarvet skygge, for eksempel for å fjerne skyggen fra et kort på mobil når kortet går over hele bredden og skyggen ser unaturlig ut langs skjermkantene. Mønsteret shadow-md md:shadow-lg bruker en mindre skygge på mobil og en større skygge på større skjermer, der flytende kort ser bedre ut.
<!-- 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>Fargede boksskygger
Tailwind v3 introduserte fargede skygger: shadow-blue-500 får skyggen til å fremstå blå. Dette skaper levende, glødende effekter som er populære i mørke temaer og på landingssider. Skyggefargen brukes via CSS-variabelen --tw-shadow-color, så De trenger fortsatt en størrelseshjelpeklasse for shadow-* sammen med fargeklassen – for eksempel 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 for kort som løftes ved pekerbevegelse
Et av de vanligste interaktive mønstrene er effekten av at et kort løftes ved pekerbevegelse: Kortet starter med en diskret skygge og får en dypere skygge når pekeren holdes over det, noe som skaper en illusjon av at det løftes. Kombiner shadow-md hover:shadow-xl med transition-shadow duration-300 for en jevn animasjon. Dette signaliserer at kortet er interaktivt, og får dashbord og produktlister til å virke gjennomarbeidede.
<!-- 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 tilbyr både boksskygger (shadow-*) og dråpeskygger (drop-shadow-*). Den viktigste forskjellen er at shadow-* brukes på elementets avgrensende boks (et rektangel), mens drop-shadow-* er et CSS-filter som følger elementets faktiske synlige form, inkludert gjennomsiktige områder. drop-shadow-* egner seg godt for uregelmessig formede elementer, for eksempel PNG-ikoner med gjennomsiktig bakgrunn.
<!-- 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 av flere skygger
CSS støtter flere skygger på ett element, men Tailwinds innebygde hjelpeklasser tilbyr bare én skygge per klasse. For flere lag kan De utvide Tailwind-temaet i tailwind.config.js med en egendefinert skygge som inneholder en kommaseparert liste med skyggedefinisjoner. Dette muliggjør avansert lagdeling, for eksempel en høydeeffekt fra Material Design eller en diskret ytre glød kombinert med en indre definisjonsskygge.
/* 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 modus
Skygger blir mindre synlige på mørke bakgrunner fordi de vanligvis bruker gjennomskinnelig svart. I mørk modus gjør fargede skygger fra Tailwind – eller lysere skyggetoner – dem fortsatt synlige. Et vanlig mønster er shadow-gray-700/50 i mørk modus for å lage en synlig skygge mot en mørk overflate. Alternativt kan De bruke kantlinjer i stedet for skygger på mørke bakgrunner, siden kantlinjer forblir synlige uavhengig av hvor lys bakgrunnen er.
<!-- 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 for tilgjengelighet
Synlige fokusindikatorer kreves av tilgjengelighetsstandardene WCAG 2.1 AA. Selv om Tailwinds ring-*-hjelpeklasser er den foretrukne moderne metoden, kan boksskygger også fungere som fokusindikatorer. Mønsteret focus:shadow-[0_0_0_3px_rgba(59,130,246,0.5)] oppretter en blå glorie – i praksis det samme som ring-2 ring-blue-500, men ved hjelp av skyggeegenskapen for kompatibilitet med eldre nettlesere.
<!-- 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>Fullstendig skyggehierarki
I et reelt brukergrensesnitt skaper en konsekvent bruk av skygger et tydelig visuelt hierarki. Bruk en systematisk tilnærming: shadow-sm for diskrete kanter på inndatafelt, shadow-md for innholdskort, shadow-lg for rullegardinmenyer, shadow-xl for sidemoduler og shadow-2xl for modaldialoger. Dette hierarkiet hjelper brukerne med å forstå romlige forhold og hvilke elementer som er kontekstuelle, versus 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>Kjapp sjekk
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen har De lært at shadow-sm til shadow-2xl gir en høydenivåskala for dybde, at shadow-inner skaper et forsenket uttrykk for nedtrykte tilstander og søkefelt, og at fargede skygger som shadow-lg shadow-blue-500/50 skaper glødeffekter for mørke temaer. Neste tema er outline- og ring-hjelpeklasser for tilgjengelige fokusindikatorer.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Skygger» gratis?
Ja – hele teksten i «Skygger» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Skygger»?
Gi dybde med shadow-sm til shadow-2xl, bruk shadow-inner for innfelte effekter, og fjern skygger med shadow-none. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Skygger»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.