CSS Gradients: Color That Comes to Life

What you’ll learn

By the end of this lesson, you will be able to:

• Explain what a CSS gradient does.
• Create linear, radial, and conic gradients.
• Adjust color stops and gradient direction.
• Build a simple animated gradient using CSS keyframes.
• Choose colors and animation that support readability and good design.

01 — What is a gradient?

A gradient is a smooth transition between two or more colors. Designers use gradients to add depth, create atmosphere, establish a visual identity, or draw attention to an important part of a page.

In CSS, gradients are created with the background property. The browser generates the color transition for you, so you don’t need to upload an image.

Here is the basic idea:

/* A simple two-color gradient */
background: linear-gradient(blue, pink);

The gradient starts with blue and blends into pink. Try replacing those colors with ones you like.

02 — Linear gradients

A linear-gradient() blends colors along a straight line. You can change the direction to make the colors move from top to bottom, left to right, or diagonally.

background: linear-gradient(120deg, #c7f464, #5dd9c1, #6178ed);

What’s happening here?

• linear-gradient() creates the gradient.
• 120deg sets its direction.
• #c7f464, #5dd9c1, and #6178ed are the colors being blended.

The deg unit means degrees. You can experiment with 0deg, 90deg, or 180deg to see how the direction changes.

Try it yourself

1. Open CodePen and create a new Pen.
2. Paste the following HTML into the HTML panel:

<section class="gradient-card">
  <h1>Color in Motion</h1>
  <p>Learning gradients with CSS.</p>
</section>

1. Paste this CSS into the CSS panel:

.gradient-card {
  padding: 4rem 2rem;
  border-radius: 16px;
  text-align: center;
  color: #172b4d;
  background: linear-gradient(
    120deg,
    #c7f464,
    #5dd9c1,
    #6178ed
  );
}

.gradient-card h1 {
  font-size: 2.5rem;
  margin-bottom: .5rem;
}

Change the colors and the angle. Notice how the mood of the design changes even though the HTML stays the same.

03 — Radial gradients

A radial-gradient() spreads outward from a central point. Imagine the glow of a lamp, a spotlight, or a colorful sunset.

background: radial-gradient(circle, #fff2a6 0%, #ff9cbd 42%, #7357d8 100%);

The circle keyword creates a circular gradient. The percentages indicate color stops: where each color appears along the transition.

Try another version

.spotlight {
  min-height: 220px;
  background: radial-gradient(
    circle at top left,
    #ffffff,
    #9be7ff 35%,
    #304ffe
  );
}

Notice circle at top left. It moves the center of the gradient toward the top-left corner.

04 — Conic gradients

A conic-gradient() blends colors around a central point, like slices of a color wheel. It can create striking poster backgrounds, decorative circles, and graphic patterns.

background: conic-gradient(
  #ff6b6b,
  #ffd166,
  #c7f464,
  #5dd9c1,
  #6178ed,
  #ff6b6b
);

For a simple experiment, give a square element a border-radius: 50% to turn it into a circle. You can use a conic gradient to create a colorful graphic without an image file.

05 — Let’s animate a gradient!

Static gradients are great, but CSS can also make a gradient appear to flow. We’ll combine a large background with an animation that changes its position over time.

Here is the complete CSS for the animated example:

.animated-gradient {
  background: linear-gradient(
    120deg,
    #172b4d,
    #7357d8,
    #ed7aa8,
    #c7f464
  );

  background-size: 300% 300%;
  animation: gradient-flow 8s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

Let’s break it down

• background-size: 300% 300% makes the gradient larger than the element, giving it room to move.
• animation tells the browser which animation to run and how long it lasts.
• @keyframes defines what happens at different points in the animation.
• background-position shifts the visible part of the gradient.
• infinite repeats the animation continuously.

06 — Design responsibly

Color and motion can make a website more engaging, but they should never make it harder to use.

• Keep text readable. Check the contrast between your text and the background, especially when a gradient contains several colors.
• Don’t overdo motion. A moving background should support the content, not compete with it.
• Respect reduced-motion preferences. Some visitors prefer less animation. CSS lets us accommodate that preference.

For example, this rule disables the gradient animation when a visitor’s device is set to reduce motion:

@media (prefers-reduced-motion: reduce) {
  .animated-gradient {
    animation: none;
  }
}

This is a small piece of code that helps make a design more considerate of its audience.

07 — Your design challenge

Now it’s your turn to make something of your own. Create a small web banner, landing-page hero, or digital poster using CSS gradients.

08 — Before you submit

• My page includes meaningful text and a clear visual idea.
• I used CSS to create gradients instead of using gradient images.
• I experimented with static and animated gradients.
• My text is readable against the background.
• My animation is not distracting and respects reduced-motion preferences.
• I checked the design at different screen sizes.
• I can explain at least one CSS choice I made.

What to submit

Submit the shareable URL to your CodePen and include a short reflection (3–5 sentences) explaining your color choices, the gradients you used, and one thing you changed after testing your design.

Quick recap

You don’t need to memorize every property. The goal is to understand what each technique can do, experiment with it, and make deliberate design choices. Save your favorite gradients—you may find a use for them in a future project!