Tailwind Gradients and Opacity

Gradients blend two or more colors into a smooth transition. Opacity controls how much of the background shows through an element. Both techniques add depth to a design with only a few classes and no image files.

Linear Gradients

A linear gradient flows along a straight line. Pick a direction class, then set the colors with from, via, and to. The via color is optional and sits in the middle.

<div class="h-32 bg-linear-to-r from-sky-500 via-indigo-500 to-purple-500"></div>

from-sky-500      via-indigo-500      to-purple-500
[sky blue] ──────► [indigo] ──────► [purple]
   left                                  right

Older projects on version 3 use the name bg-gradient-to-r for the same effect. Version 4 renamed the family to bg-linear-to-r.

Direction Classes

Class              Direction
─────────────────────────────────
bg-linear-to-t     bottom → top
bg-linear-to-r     left → right
bg-linear-to-b     top → bottom
bg-linear-to-l     right → left
bg-linear-to-tr    bottom-left → top-right
bg-linear-to-br    top-left → bottom-right
bg-linear-45       exact 45 degree angle

Controlling Color Stops

A stop is the point where a color reaches full strength. Add a percentage to move it.

from-sky-500 from-10%   →  sky blue holds until 10%
via-indigo-500 via-40%  →  indigo peaks at 40%
to-purple-500 to-90%    →  purple starts at 90%

Radial and Conic Gradients

Version 4 adds bg-radial and bg-conic. A radial gradient spreads outward from a center point like ripples in water. A conic gradient sweeps around a center like the hand of a clock.

bg-radial from-white to-sky-500       bg-conic from-red-500 to-blue-500

      · · · · ·                            ╱ red ╲
    ·  white    ·                         │   ●   │
    ·   ●  blue ·                          ╲ blue ╱
      · · · · ·

Gradient Text

Clip the background to the text shape and make the text fill transparent. The gradient then shows through the letters.

<h2 class="bg-linear-to-r from-pink-500 to-orange-400 bg-clip-text text-4xl font-bold text-transparent">
  Colorful Heading
</h2>

Understanding Opacity

Opacity measures how solid an element looks. A value of 100 means fully solid. A value of 0 means fully invisible. Think of a window pane: clear glass lets everything through, frosted glass lets some light through, and a wall blocks everything.

opacity-100   ████████  solid
opacity-75    ██████▒▒
opacity-50    ████▒▒▒▒  half see-through
opacity-25    ██▒▒▒▒▒▒
opacity-0     ········  invisible

Opacity on the Whole Element

The opacity-50 class fades the entire element, including its text and children. Use it for disabled buttons and faded images.

Opacity on a Single Color

A slash after a color name changes only that color. The text stays solid while the background turns see-through. This approach gives cleaner results than fading the whole element.

bg-black/50       →  black background at 50 percent
text-white/80     →  white text at 80 percent
border-sky-500/30 →  sky blue border at 30 percent

Glass Effect Example

Combine a see-through background with a blur on whatever sits behind it. The result looks like frosted glass.

<div class="rounded-xl border border-white/30 bg-white/20 p-6 backdrop-blur-md">
  Glass card
</div>

Choosing Good Gradient Colors

Two colors from the same family blend smoothly. Sky blue into indigo feels calm and professional. Two colors from opposite sides of the color wheel, such as orange and blue, can produce a muddy gray zone in the middle. Add a via color between them to keep the middle bright.

Shade numbers matter as well. A gradient from blue-400 to blue-600 creates a subtle lift, ideal for buttons. A gradient from pink-500 to yellow-400 creates a bold backdrop, ideal for a hero banner. Match the strength of the gradient to the importance of the element.

Animating Gradients and Opacity

Opacity changes animate smoothly. Pair opacity-0 with hover:opacity-100 and transition-opacity to reveal a caption when a visitor points at an image. Gradient colors do not animate by default in every browser, so a safer pattern places two layers on top of each other and fades the top layer.

<div class="group relative h-40">
  <div class="absolute inset-0 bg-linear-to-r from-sky-500 to-indigo-500"></div>
  <div class="absolute inset-0 bg-linear-to-r from-pink-500 to-orange-400 opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
</div>

Readability Rules

Gradients and transparency can reduce contrast between text and background. Check that text stays easy to read over every part of the gradient. Dark text on a light area and light text on a dark area keep content accessible. Test the design on a phone in bright light to confirm.

• Choose gradient colors that sit close together on the color wheel for a calm look.
• Limit a page to one or two gradients so the design stays focused.
• Add a solid color fallback class such as bg-sky-500 for rare browsers that skip gradients.