Bird
Raised Fist0
Tailwindmarkup~5 mins

Gradient utilities (from, via, to) in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Gradients add smooth color changes to backgrounds. Tailwind makes it easy to create them with simple classes.

You want a colorful background that changes from one color to another.
You want to highlight a button with a smooth color blend.
You want a banner with a soft color transition.
You want to create a modern look with multiple colors blending.
You want to add depth or interest to a section without images.
Syntax
Tailwind
bg-gradient-to-{direction} from-{color} via-{color} to-{color}

bg-gradient-to-{direction} sets the gradient direction (like t for top, r for right).

from-, via-, and to- set the colors at the start, middle, and end of the gradient.

Examples
Gradient goes from blue on the left to green on the right.
Tailwind
bg-gradient-to-r from-blue-500 to-green-500
Gradient goes from red at top, through yellow in middle, to green at bottom.
Tailwind
bg-gradient-to-b from-red-400 via-yellow-300 to-green-400
Gradient goes diagonally from top-left to bottom-right, purple to pink.
Tailwind
bg-gradient-to-tr from-purple-600 to-pink-400
Sample Program

This page shows a box with a smooth gradient background from blue to purple to pink horizontally. The text is centered and easy to read.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Gradient Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="w-64 h-32 rounded-lg bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 flex items-center justify-center text-white font-bold text-lg">
    Gradient Box
  </div>
</body>
</html>
OutputSuccess
Important Notes

You can use as many colors as you want by combining from-, via-, and to-.

Make sure your text color contrasts well with the gradient for readability.

Use bg-gradient-to-{direction} to control the gradient angle easily.

Summary

Use from-, via-, and to- classes to create smooth color gradients.

Set gradient direction with bg-gradient-to-{direction}.

Gradients add visual interest and modern style to your web elements.

Practice

(1/5)
1. What does the Tailwind class from-blue-500 do when used with a gradient background?
easy
A. It changes the text color to blue-500.
B. It sets the starting color of the gradient to blue-500.
C. It sets the ending color of the gradient to blue-500.
D. It sets the middle color of the gradient to blue-500.

Solution

  1. Step 1: Understand gradient color stops

    The from- class in Tailwind sets the first color stop in a gradient.

  2. Step 2: Identify the role of from-blue-500

    This class sets the gradient's start color to the blue-500 shade.

  3. Final Answer:

    It sets the starting color of the gradient to blue-500. -> Option B

  4. Quick Check:

    from- means start color [OK]
Hint: Remember: from = start color, via = middle, to = end [OK]
Common Mistakes:
  • Confusing 'from-' with 'to-' or 'via-' classes
  • Thinking it changes text color instead of background
  • Assuming it sets the gradient direction
2. Which of the following is the correct Tailwind syntax to create a gradient that starts from red, passes through yellow, and ends in green?
easy
A. bg-gradient-from-red-500 via-yellow-400 to-green-500
B. bg-gradient-to-r from-red-500 to-yellow-400 via-green-500
C. bg-gradient-to-r from-red-500 via-yellow-400 to-green-500
D. bg-gradient-to-r via-red-500 from-yellow-400 to-green-500

Solution

  1. Step 1: Check gradient direction syntax

    The correct direction syntax is bg-gradient-to-{direction}, here to-r means left to right.

  2. Step 2: Verify color stop order

    The order must be from- (start), via- (middle), then to- (end). bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 follows this order correctly.

  3. Final Answer:

    <code>bg-gradient-to-r from-red-500 via-yellow-400 to-green-500</code> -> Option C

  4. Quick Check:

    Correct syntax and order = bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 [OK]
Hint: Use bg-gradient-to-{dir} with from-, via-, to- in order [OK]
Common Mistakes:
  • Mixing order of from, via, to classes
  • Using bg-gradient-from- instead of bg-gradient-to-
  • Placing via- after to-
3. What will be the visible background gradient of this div?
<div class="bg-gradient-to-b from-purple-400 via-pink-500 to-red-500 h-32 w-32"></div>
medium
A. A vertical gradient from purple at top, through pink in middle, to red at bottom.
B. A horizontal gradient from purple on left, through pink in middle, to red on right.
C. A solid purple background with pink and red stripes.
D. No gradient, just a red background.

Solution

  1. Step 1: Understand gradient direction

    bg-gradient-to-b means gradient goes from top to bottom (vertical).

  2. Step 2: Analyze color stops

    from-purple-400 is start (top), via-pink-500 is middle, to-red-500 is end (bottom).

  3. Final Answer:

    A vertical gradient from purple at top, through pink in middle, to red at bottom. -> Option A

  4. Quick Check:

    to-b = vertical gradient, from/via/to colors in order [OK]
Hint: bg-gradient-to-b means vertical top-to-bottom gradient [OK]
Common Mistakes:
  • Confusing to-b with to-r (vertical vs horizontal)
  • Ignoring the via- color in the middle
  • Thinking it creates stripes instead of smooth gradient
4. Identify the error in this Tailwind gradient class:
class="bg-gradient-to-l from-green-400 to-yellow-500 via-blue-500"
medium
A. The order of color stops is incorrect; 'via-' should come between 'from-' and 'to-'.
B. The gradient direction 'to-l' is invalid in Tailwind.
C. The 'via-' color must be the same as 'from-' color.
D. There is no error; this is a valid gradient class.

Solution

  1. Step 1: Check gradient direction

    bg-gradient-to-l is valid and means gradient goes leftwards.

  2. Step 2: Verify color stop order

    Order is from-green-400, to-yellow-500, and via-blue-500. Tailwind allows via- anywhere between from and to; order in class attribute does not matter.

  3. Final Answer:

    There is no error; this is a valid gradient class. -> Option D

  4. Quick Check:

    Gradient direction and colors are valid [OK]
Hint: Order of classes in attribute doesn't affect gradient correctness [OK]
Common Mistakes:
  • Thinking class order matters for gradient stops
  • Assuming 'to-l' is invalid direction
  • Believing via- color must match from- color
5. You want a smooth diagonal gradient from blue to purple with a soft pink in the middle on a button. Which Tailwind classes correctly achieve this effect?
hard
A. bg-gradient-to-br from-blue-600 via-pink-300 to-purple-700
B. bg-gradient-to-tr from-purple-700 via-pink-300 to-blue-600
C. bg-gradient-to-br from-pink-300 via-blue-600 to-purple-700
D. bg-gradient-to-bl from-blue-600 via-purple-700 to-pink-300

Solution

  1. Step 1: Choose correct gradient direction

    Diagonal from top-left to bottom-right is bg-gradient-to-br.

  2. Step 2: Set color stops in correct order

    Start with blue (from-blue-600), middle pink (via-pink-300), end purple (to-purple-700).

  3. Step 3: Verify options

    bg-gradient-to-br from-blue-600 via-pink-300 to-purple-700 matches direction and color order perfectly; others mix colors or directions incorrectly.

  4. Final Answer:

    <code>bg-gradient-to-br from-blue-600 via-pink-300 to-purple-700</code> -> Option A

  5. Quick Check:

    Diagonal + correct from/via/to colors = bg-gradient-to-br from-blue-600 via-pink-300 to-purple-700 [OK]
Hint: Match direction with color order: from-start, via-middle, to-end [OK]
Common Mistakes:
  • Mixing up gradient directions (br vs tr vs bl)
  • Placing colors in wrong from/via/to order
  • Using middle color as start or end