Gradienty tła
Tworzyć gradienty liniowe za pomocą bg-gradient-to-* oraz punktów przejścia kolorów from-*/via-*/to-*, uzyskując ciekawe efekty wizualne.
Gradienty tła to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Introduction to CSS Gradients
A gradient transitions smoothly between two or more colors. In CSS, linear gradients go in a straight line while radial gradients radiate from a center point. Gradients add visual depth, create the impression of lighting, and help pages feel less flat. Tailwind makes creating linear gradients straightforward with a composable set of utility classes.
bg-gradient-to-* Direction Classes
Tailwind's gradient direction utilities follow compass directions. bg-gradient-to-r goes left to right, bg-gradient-to-b top to bottom, bg-gradient-to-br top-left to bottom-right. These eight direction utilities cover all the angles you will typically need. Apply one as the base gradient class, then specify colors with stop utilities.
<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>from-* and to-* Color Stops
Define where a gradient starts and ends using from-{color}-{shade} and to-{color}-{shade}. The gradient transitions smoothly from the from-* color at one edge to the to-* color at the other. You can use any color from Tailwind's palette for both stops, or mix color families for vibrant cross-hue gradients.
<!-- 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>Adding a via-* Midpoint Stop
Add a middle color stop with via-{color}-{shade} to create a three-color gradient. The gradient transitions from from-* through via-* to to-*. This enables sunset-style gradients and rainbow effects. You can also use via-transparent to create an interesting fade-in and fade-out with a transparent midpoint.
<!-- 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>Gradient Stops With Opacity
Combine gradient stops with the slash opacity modifier for semi-transparent gradients. from-blue-600/0 to-blue-600 creates a gradient that fades from fully transparent to fully opaque — great for overlays on images or creating a frosted glass effect that shows the content behind it at the edges.
<!-- 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 Section With Gradient Background
Gradients are most commonly used on hero sections to create visual interest behind headline text. A subtle bg-gradient-to-br from-indigo-50 to-white gives a clean, modern look. A bold bg-gradient-to-r from-purple-700 to-indigo-700 creates a full-bleed dark hero for SaaS applications. The key is ensuring sufficient text contrast over the gradient.
<!-- 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>Card Gradient Borders
Create the illusion of a gradient border by nesting elements. Apply the gradient as the outer element's background, then place an inner element with a white or dark background and a small margin. The outer gradient background is exposed as a visible border. This technique requires no custom CSS and works reliably across all browsers.
<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>Gradient Text (Recap and Extension)
Gradient text applies a linear gradient to the text fill color using bg-gradient-to-r from-* to-* combined with bg-clip-text text-transparent. This technique clips the background gradient to the text shape, making gradient the visible color of the characters. It works best on large, bold headings where the gradient transition is clearly visible.
<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>Animated Gradients
While Tailwind cannot animate gradient positions directly (CSS does not support transitioning gradient stops natively), you can achieve animated gradient effects by animating background-size. Set bg-[length:200%_auto] and animate with a custom CSS animation to create a flowing gradient shimmer. This pattern is common in loading skeletons and premium design highlights.
/* 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;
}Radial Gradients With Arbitrary Values
Tailwind does not include radial gradient utilities by default, but you can write them using arbitrary values. The bg-[radial-gradient(...)] syntax lets you specify any valid CSS gradient value directly. This is powerful for creating spotlight or glow effects, though use arbitrary values sparingly as they bypass the design token system.
<!-- 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>Practical: SaaS Pricing Card Gradient
A highlighted pricing card (the recommended plan) often uses a gradient background to make it stand out. Combine a gradient background with a shadow, rounded corners, and white text for a premium, conversion-optimized look. The non-highlighted plans use a plain white background, making the gradient card the visual focal point of the pricing section.
<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>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: bg-gradient-to-{direction} sets gradient direction using compass points, from-*, via-*, and to-* define up to three color stops, and bg-clip-text text-transparent creates gradient-filled text. Next up we learn how to control background opacity and use color modifiers effectively.
Często zadawane pytania
Czy lekcja „Gradienty tła” jest bezpłatna?
Tak — pełny tekst „Gradienty tła” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Gradienty tła”?
Tworzyć gradienty liniowe za pomocą bg-gradient-to-* oraz punktów przejścia kolorów from-*/via-*/to-*, uzyskując ciekawe efekty wizualne. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Gradienty tła”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.