CSS Gradients

Let me ask you something.

Have you ever noticed that a lot of modern websites do not just have one flat color as their background? They have colors that slowly blend into each other. Dark at the top, lighter at the bottom. Or one color on the left fading into a completely different color on the right.

That is a gradient. And once you know how to use it you will start seeing it everywhere — Netflix thumbnail overlays, Spotify cards, Instagram buttons, hero sections on almost every modern landing page.

Let us learn how to make them.

What is a Gradient

A gradient is when one color smoothly transitions into another. Instead of a sharp line where one color ends and another begins, the colors blend naturally.

CSS gives you two main types of gradients.

Linear gradient — colors flow in a straight line. Left to right, top to bottom, or any angle you choose.

Radial gradient — colors flow outward from a center point, like a spotlight or a glow effect.

We will cover both. But linear gradients are what you will use in almost every project so let us start there.

CSS Linear Gradient

A linear gradient is made using the linear-gradient() function inside the background property.

Here is the most basic version — two colors blending from left to right.

The background smoothly goes from black on the left to Netflix red on the right.

Let us break down what is happening inside that linear-gradient().

• to right — this is the direction. The gradient flows from left to right.
• #000000 — this is the starting color.
• #E50914 — this is the ending color.

That is the basic structure. Direction, starting color, ending color.

Changing the Direction

You can make the gradient flow in any direction you want.

Now the gradient flows from top to bottom. Black at the top fading into red at the bottom.

Here are all the directions you can use:

• to right — left to right
• to left — right to left
• to bottom — top to bottom
• to top — bottom to top
• to bottom right — diagonal from top left to bottom right

You can also use angles instead of words. 45deg gives you a diagonal, 90deg gives you left to right, 180deg gives you top to bottom.

A diagonal gradient from bottom left to top right.

Using More Than Two Colors

You are not limited to just two colors. You can add as many as you want separated by commas.

Now the gradient goes black to red and back to black. This creates a nice centered glow effect.

A Technique You Will Use All the Time

Here is something I use in almost every project. Instead of blending from one color to another you can fade from a solid color to transparent. This is perfect for putting a gradient overlay on top of a background image so the text stays readable.

The top of the section is dark so the text is perfectly readable. As you go down the image becomes more visible. That is the exact technique Netflix uses on their thumbnail cards and hero sections.

CSS Radial Gradient

A radial gradient flows outward from a center point. Think of it like a spotlight shining on a wall — bright in the middle, fading out toward the edges.

Red glowing outward from the center fading to black at the edges.

Radial gradients are used less often than linear ones but they are great for creating spotlight effects, glowing buttons, or dramatic background effects.