Bakgrunnsgradienter
Bygg lineære gradienter med bg-gradient-to-* og fargestoppene from-*/via-*/to-* for rike visuelle effekter.
Bakgrunnsgradienter er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 2 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.
Introduksjon til CSS-gradienter
En gradient er en jevn overgang mellom to eller flere farger. I CSS går lineære gradienter i en rett linje, mens radiale gradienter stråler ut fra et sentralt punkt. Gradienter tilfører visuell dybde, skaper inntrykk av belysning og får sider til å virke mindre flate. Tailwind gjør det enkelt å lage lineære gradienter med et sett komponerbare verktøyklasser.
Retningsklasser for bg-gradient-to-*
Tailwinds verktøyklasser for gradientretning følger kompassretningene. bg-gradient-to-r går fra venstre til høyre, bg-gradient-to-b ovenfra og ned, og bg-gradient-to-br fra øverst til venstre til nederst til høyre. Disse åtte retningsverktøyklassene dekker alle vinklene De vanligvis trenger. Bruk én som grunnklasse for gradienten, og angi deretter fargene med stopp-verktøyklasser.
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-16"></div>
<div class="bg-gradient-to-b from-sky-400 to-blue-600 h-16"></div>
<div class="bg-gradient-to-br from-green-400 to-teal-600 h-16"></div>
<div class="bg-gradient-to-tr from-indigo-500 to-sky-500 h-16"></div>Fargestopp med from-* og to-*
Definer hvor en gradient begynner og slutter, med from-{color}-{shade} og to-{color}-{shade}. Gradientens overgang går jevnt fra from-*-fargen ved den ene kanten til to-*-fargen ved den andre. De kan bruke hvilken som helst farge fra Tailwinds palett for begge stoppene, eller blande fargefamilier for livlige gradienter på tvers av fargetoner.
<!-- Same-family gradient: depth -->
<div class="bg-gradient-to-r from-blue-400 to-blue-700 h-16"></div>
<!-- Cross-family gradient: vivid effect -->
<div class="bg-gradient-to-r from-violet-600 to-pink-600 h-16"></div>
<!-- Neutral to color: subtle fade -->
<div class="bg-gradient-to-b from-white to-gray-100 h-16"></div>Legge til et midtpunktstopp med via-*
Legg til et midtpunkt i en gradient med via-{color}-{shade} for å lage en gradient med tre farger. Gradientens overgang går fra from-* via via-* til to-*. Dette gjør det mulig å lage gradienter i solnedgangsstil og regnbueeffekter. De kan også bruke via-transparent for å lage en interessant inn- og uttoning med et gjennomsiktig midtpunkt.
<!-- Three-stop gradient: sunset effect -->
<div class="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-600 h-16"></div>
<!-- Via transparent: fade in and fade out -->
<div class="bg-gradient-to-r from-indigo-600 via-transparent to-indigo-600 h-16"></div>Gradientstopp med gjennomsiktighet
Kombiner gradientstopp med skråstrekmodifikatoren for gjennomsiktighet for å lage halvgjennomsiktige gradienter. from-blue-600/0 to-blue-600 lager en gradient som går fra helt gjennomsiktig til helt ugjennomsiktig – perfekt for overlegg på bilder eller for å lage en frostet glasseffekt som viser innholdet bak langs kantene.
<!-- Image with gradient overlay for text readability -->
<div class="relative h-64">
<img src="photo.jpg" class="absolute inset-0 w-full h-full object-cover" alt="" />
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-black/0"></div>
<h2 class="absolute bottom-4 left-4 text-white font-bold text-xl">Card Title</h2>
</div>Hero-seksjon med gradientbakgrunn
Gradienter brukes oftest i hero-seksjoner for å skape visuell interesse bak overskriftstekst. En diskret bg-gradient-to-br from-indigo-50 to-white gir et rent og moderne uttrykk. En markant bg-gradient-to-r from-purple-700 to-indigo-700 lager en mørk hero-seksjon som går helt ut til kantene, for SaaS-applikasjoner. Det viktigste er å sikre tilstrekkelig tekstkontrast over gradienten.
<!-- Dark hero with gradient -->
<section class="bg-gradient-to-r from-purple-700 to-indigo-700 px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl font-extrabold text-white mb-4">Ship Faster</h1>
<p class="text-indigo-200 text-xl">Built with Tailwind CSS.</p>
</div>
</section>Gradientkanter på kort
Skap inntrykk av en gradientkant ved å nøste elementer. Bruk gradienten som bakgrunn på det ytre elementet, og plasser deretter et indre element med hvit eller mørk bakgrunn og en liten marg. Den ytre gradientbakgrunnen blir synlig som en kant. Denne teknikken krever ingen egendefinert CSS og fungerer pålitelig i alle nettlesere.
<div class="p-0.5 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500">
<div class="bg-white rounded-xl p-6">
<h3 class="font-bold text-gray-900">Gradient Border Card</h3>
<p class="text-gray-500 text-sm">Content inside with a colorful border.</p>
</div>
</div>Gradienttekst (oppsummering og utvidelse)
Gradienttekst bruker en lineær gradient som tekstens fyllfarge ved å kombinere bg-gradient-to-r from-* to-* med bg-clip-text text-transparent. Denne teknikken klipper bakgrunnsgradienten etter tekstens form, slik at gradienten blir den synlige fargen på tegnene. Den fungerer best på store, fete overskrifter der gradientovergangen er tydelig synlig.
<h2 class="text-4xl font-extrabold bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
Gradient Text Headline
</h2>
<!-- Three-color gradient text -->
<h2 class="text-4xl font-extrabold bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
Vibrant Three-Stop Gradient
</h2>Animerte gradienter
Selv om Tailwind ikke kan animere gradientposisjoner direkte (CSS støtter ikke overgang mellom gradientstopp innebygd), kan De oppnå animerte gradienteffekter ved å animere bakgrunnsstørrelsen. Angi bg-[length:200%_auto] og animer med en egendefinert CSS-animasjon for å lage en flytende glans i gradienten. Dette mønsteret er vanlig i skjelettvisninger under innlasting og i eksklusive designdetaljer.
/* In your CSS -- custom animation for gradient movement */
@keyframes gradient-x {
0%, 100% { background-position: left center; }
50% { background-position: right center; }
}
.animate-gradient {
background-size: 200% auto;
animation: gradient-x 3s ease infinite;
}Radiale gradienter med vilkårlige verdier
Tailwind inkluderer ikke verktøyklasser for radiale gradienter som standard, men De kan skrive dem ved hjelp av vilkårlige verdier. Syntaksen bg-[radial-gradient(...)] lar Dem angi en hvilken som helst gyldig CSS-gradientverdi direkte. Dette er nyttig for å lage spotlight- eller glødeeffekter, men bruk vilkårlige verdier med måte, siden de omgår systemet for designtoken.
<!-- Radial glow effect via arbitrary value -->
<div class="bg-[radial-gradient(ellipse_at_center,_theme(colors.indigo.300),_transparent)] h-64 w-full rounded-xl">
Radial glow from center
</div>Praktisk: Gradient på SaaS-priskort
Et fremhevet priskort (den anbefalte planen) bruker ofte en gradientbakgrunn for å skille seg ut. Kombiner en gradientbakgrunn med en skygge, avrundede hjørner og hvit tekst for et eksklusivt og konverteringsoptimalisert uttrykk. Planene som ikke er fremhevet, bruker en enkel hvit bakgrunn, slik at gradientkortet blir det visuelle midtpunktet i prisområdet.
<div class="bg-gradient-to-b from-indigo-600 to-indigo-800 rounded-2xl p-8 shadow-2xl text-white">
<p class="text-indigo-200 text-sm font-semibold uppercase tracking-wider">Most Popular</p>
<p class="text-4xl font-black mt-2">$49<span class="text-xl font-normal">/mo</span></p>
<ul class="mt-6 space-y-3 text-indigo-100 text-sm">
<li>Unlimited projects</li>
<li>Priority support</li>
<li>Custom domain</li>
</ul>
<button class="mt-8 w-full bg-white text-indigo-700 font-bold py-3 rounded-xl hover:bg-indigo-50">
Get Started
</button>
</div>Hurtigsjekk
Test forståelsen Deres av konseptene fra Tailwind CSS Mastery i denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De: bg-gradient-to-{direction} angir gradientretningen ved hjelp av kompassretninger, from-*, via-* og to-* definerer opptil tre fargestopp, og bg-clip-text text-transparent lager tekst fylt med gradient. Deretter skal vi lære å styre bakgrunnens gjennomsiktighet og bruke fargemodifikatorer effektivt.
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 «Bakgrunnsgradienter» gratis?
Ja – hele teksten i «Bakgrunnsgradienter» 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 «Bakgrunnsgradienter»?
Bygg lineære gradienter med bg-gradient-to-* og fargestoppene from-*/via-*/to-* for rike visuelle effekter. 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 2 av 4.
Hvor lang tid tar leksjonen «Bakgrunnsgradienter»?
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.
Alle leksjonene i dette kurset
- Tailwinds fargepalett
- Bakgrunnsgradienter
- Gjennomsiktighets- og fargemodifikatorer
- Bakgrunnsstørrelse, -posisjon og -gjentakelse