Lesson 50: CSS Gradients · Linear, Radial, and Conic

Phase 1 of 7

Lesson Introduction

Have you ever looked at a beautiful website and noticed a background that smoothly changes from one colour into another · like a sunset going from orange to purple? That is called a gradient, and CSS makes it surprisingly easy to create them.

In this lesson you will learn all three types of CSS gradients:

Linear gradients · colours flow in a straight line (top to bottom, left to right, or at any angle you choose)
Radial gradients · colours radiate outward from a central point, like the glow of a lamp
Conic gradients · colours rotate around a centre point, like the slices of a pie chart or the hands of a clock

By the end of this lesson you will be able to add rich, professional-looking colour effects to any webpage element · no images needed. You will also complete a mini-project that combines all three gradient types into a beautiful webpage card.

💡 Why does this matter in the real world? Gradients are everywhere: hero banners on landing pages, app icons, data visualisation backgrounds, button hover effects, and chart colour fills. Knowing how to create them with pure CSS means you never have to rely on an image file just for a colour effect · which makes your pages faster and easier to maintain.

✏️ Your Task

Practise what you just learned about Lesson Introduction. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 2 of 7

Prerequisite Concepts

Before we dive into gradients, make sure you understand these basic ideas. If any of them are new to you, read the short explanation below before continuing.

What is CSS?

CSS stands for Cascading Style Sheets. It is the language used to style HTML elements · controlling their colours, sizes, fonts, positions, and much more.

What is a CSS property?

A CSS property is an instruction you give to the browser. For example:

css

color: red;

This tells the browser to make text red. The part before the colon (color) is the property name. The part after (red) is the value.

What is `background-image`?

background-image is the CSS property used to set a background on an element. Normally you might point it at an image file:

css

background-image: url("photo.jpg");

But CSS gradient functions are used inside background-image · they generate the colour pattern for you, with no image file needed:

css

background-image: linear-gradient(red, yellow);

What is a function in CSS?

A CSS function is a built-in tool that takes inputs inside parentheses () and produces an output. For example:

css

background-image: linear-gradient(red, yellow);
/*               ^ function name  ^ inputs     */

The function linear-gradient() takes colour names (and other optional inputs) and produces a smooth colour transition.

What is `rgba()`?

rgba() is a way to write a colour in CSS using Red, Green, Blue, and Alpha (transparency):

css

rgba(255, 0, 0, 1)    /* fully opaque red   */
rgba(255, 0, 0, 0.5)  /* 50% transparent red */
rgba(255, 0, 0, 0)    /* fully transparent   */

The fourth number (the alpha) ranges from 0 (invisible) to 1 (fully visible).

✏️ Your Task

Practise what you just learned about Prerequisite Concepts. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 3 of 7

Part 1 · CSS Linear Gradients

1.1 What Is a Linear Gradient?

A linear gradient is a smooth colour transition that travels in a straight line. Think of it like painting a wall where your roller brush starts with one colour and gradually becomes another colour as it moves across the wall.

The key rule: a linear gradient must have at least two colour stops. A colour stop is simply a colour you want to include in the transition.

Where does it go? You put it inside the background-image property:

css

background-image: linear-gradient(direction, color1, color2);

direction · where the gradient flows (optional; default is top to bottom)
color1, color2 · the colours to blend between

1.2 Direction · Top to Bottom (the Default)

When you do not specify a direction, the gradient flows from the top of the element downward to the bottom. This is the default behaviour.

Example 1 · Simplest possible linear gradient:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 300px;
      height: 150px;
      background-image: linear-gradient(red, yellow);
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

What you will see: A rectangle that is red at the top, gradually blending into yellow at the bottom.

You can also write the direction explicitly as to bottom:

css

background-image: linear-gradient(to bottom, red, yellow);

This produces exactly the same result as not specifying a direction.

🤔 Thinking prompt: What would happen if you swapped the colours · linear-gradient(yellow, red)? Try to predict it before experimenting!

1.3 Direction · Bottom to Top

To make the gradient flow upward, use to top:

css

#box {
  background-image: linear-gradient(to top, red, yellow);
}

What you will see: The box starts red at the bottom and fades into yellow at the top.

Think of it like sunrise · the warm colour rises from the bottom.

1.4 Direction · Left to Right

css

#box {
  background-image: linear-gradient(to right, red, yellow);
}

What you will see: Red on the left side, smoothly blending to yellow on the right · like a horizontal colour sweep.

1.5 Direction · Diagonal

You can make a gradient travel diagonally by combining two directions:

css

#box {
  background-image: linear-gradient(to bottom right, red, yellow);
}

What you will see: The gradient flows from the top-left corner (red) toward the bottom-right corner (yellow).

Other diagonal options include to top right, to top left, and to bottom left.

1.6 Using Angles for Precise Control

Instead of words like to right, you can use a degree angle for exact control over the direction. Think of it like a clock:

Angle value	Same as
`0deg`	`to top`
`90deg`	`to right`
`180deg`	`to bottom`
`270deg`	`to left`
`45deg`	to top-right
`135deg`	to bottom-right

Syntax:

css

background-image: linear-gradient(angle, color1, color2);

Example · 45-degree gradient:

css

#box {
  background-image: linear-gradient(45deg, red, yellow);
}

What you will see: A diagonal gradient flowing at 45 degrees from the bottom-left (red) to the top-right (yellow).

Example · 180-degree gradient (same as default top-to-bottom):

css

#box {
  background-image: linear-gradient(180deg, red, yellow);
}

🤔 Thinking prompt: What angle would you use to make the gradient flow from right to left?

1.7 Multiple Colour Stops

You are not limited to just two colours. You can include as many colour stops as you like, separated by commas:

Example · Three colours:

css

#box {
  background-image: linear-gradient(red, yellow, green);
}

What you will see: Red at the top → yellow in the middle → green at the bottom.

Example · Rainbow gradient (seven colours, left to right):

css

#box {
  background-image: linear-gradient(
    to right,
    red, orange, yellow, green, blue, indigo, violet
  );
}

What you will see: A full rainbow flowing horizontally across the element.

The browser automatically spaces each colour evenly unless you specify positions manually (which we will cover in the exercise section).

1.8 Using Transparency in Gradients

CSS gradients support transparency. This is useful for fading effects · for example, having an element fade from invisible to a colour, or having a colour overlay that fades out.

You create transparency using rgba():

css

rgba(255, 0, 0, 0)   /* transparent red (invisible) */
rgba(255, 0, 0, 1)   /* fully opaque red */

Example · Fade from transparent to red (left to right):

css

#box {
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    rgba(255, 0, 0, 1)
  );
}

What you will see: The left side is completely transparent (you see the element's default background or the page background), and the right side is fully red. This creates a beautiful fade-in effect.

Real-world use: This technique is used on websites to create image overlays, text-readable gradients over photos, and colour-blending effects in data dashboards.

1.9 Repeating Linear Gradients

The repeating-linear-gradient() function tiles your gradient pattern repeatedly across the element, like a striped wallpaper.

Syntax:

css

background-image: repeating-linear-gradient(color1, color2 stop1, color3 stop2);

The numbers after the colours are position stops · they tell the browser where in the pattern that colour should be at (using percentages or pixels).

Example · Repeating red, yellow, and green stripes:

css

#box {
  background-image: repeating-linear-gradient(
    red,
    yellow 10%,
    green 20%
  );
}

What you will see: A pattern of red → yellow → green → red → yellow → green → ... repeating all the way down the element, like candy stripes.

Breaking down the code:

red · the pattern starts with red at 0%
yellow 10% · yellow is reached at 10% of the element's size
green 20% · green is reached at 20%
After 20%, the whole pattern repeats from the beginning

✏️ Your Task

Practise what you just learned about CSS Linear Gradients. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 4 of 7

Part 2 · CSS Radial Gradients

2.1 What Is a Radial Gradient?

A radial gradient radiates outward from a centre point, like ripples in water when you drop a stone, or the glow of a light bulb.

Instead of colours moving in a straight line, they move outward in an oval or circular shape.

The CSS function is radial-gradient().

Basic syntax:

css

background-image: radial-gradient(shape size at position, color1, color2, ...);

At minimum, you just need two colours:

css

background-image: radial-gradient(red, yellow);

What you will see: Red in the centre of the element, gradually blending to yellow at the edges.

2.2 Radial Gradient · Evenly Spaced Colour Stops

By default, multiple colours are spaced evenly in a radial gradient:

Example · Three evenly spaced colours:

css

#box {
  background-image: radial-gradient(red, yellow, green);
}

What you will see: Red at the centre → yellow in the middle ring → green at the outer edges.

2.3 Radial Gradient · Differently Spaced Colour Stops

You can control exactly where each colour appears by giving it a percentage position:

Example · Colour stops at specific positions:

css

#box {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

What you will see:

Red occupies only the very centre (up to 5% of the radius)
Yellow appears from 5% to 15%
Green fills from 15% all the way to 60%, then continues to the edges

Compare this with the evenly-spaced example · notice how much more red is visible when the stops are forced apart.

2.4 Shape · Circle vs Ellipse

By default, the radial gradient shape follows the shape of the element. If your element is wider than it is tall (a rectangle), the gradient will be elliptical (oval-shaped). If the element is perfectly square, it will be circular.

You can force the shape with the circle or ellipse keyword:

Example · Forced circular gradient:

css

#box {
  background-image: radial-gradient(circle, red, yellow, green);
}

What you will see: Even if the box is a rectangle, the gradient radiates outward in a perfect circle from the centre.

Example · Ellipse (default):

css

#box {
  background-image: radial-gradient(ellipse, red, yellow, green);
}

What you will see: The gradient spreads in an oval shape, stretching to match the element's proportions.

🤔 Thinking prompt: When would you use a circle vs. an ellipse? Hint: think about icon designs vs. banner backgrounds.

2.5 Size Keywords · Controlling How Far the Gradient Extends

You can control where the gradient "ends" relative to the element using these size keywords:

Keyword	Meaning
`closest-side`	Gradient ends at the nearest side of the element from the centre
`farthest-side`	Gradient ends at the farthest side of the element from the centre
`closest-corner`	Gradient ends at the nearest corner of the element from the centre
`farthest-corner`	Gradient ends at the farthest corner (this is the default)

Example · Closest-side ellipse:

css

#box {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

What this does:

closest-side · the gradient stops as soon as it hits the nearest side
at 60% 55% · the centre of the gradient is placed 60% from the left and 55% from the top (off-centre)
The gradient radiates: red → yellow → black

Example · Farthest-side circle:

css

#box {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

What changes: The gradient now extends all the way to the farthest side, making a larger visible spread of colour.

2.6 Changing the Position of the Centre Point

By default, the gradient radiates from the very centre of the element. You can move it anywhere using the at keyword followed by X and Y positions:

css

background-image: radial-gradient(circle at x-position y-position, colors...);

Example · Centre in the top-left corner:

css

#box {
  background-image: radial-gradient(circle at left top, red, yellow, green);
}

What you will see: The gradient originates from the top-left corner and radiates outward toward the bottom-right.

Other position keywords you can use: right, left, top, bottom, center, or percentages like at 20% 80%.

2.7 Repeating Radial Gradients

Just like linear gradients can repeat, so can radial gradients · the pattern tiles outward in concentric rings.

Example · Repeating radial gradient:

css

#box {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

What you will see: Concentric rings of red → yellow → green → red → yellow → green → ... radiating outward from the centre, like a target or a bullseye pattern.

Real-world use: This is used for creating target graphics, ripple effects in backgrounds, and decorative pattern fills.

✏️ Your Task

Practise what you just learned about CSS Radial Gradients. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 5 of 7

Part 3 · CSS Conic Gradients

3.1 What Is a Conic Gradient?

A conic gradient is a colour transition that rotates around a centre point. Instead of colours spreading outward (like radial) or flowing in a line (like linear), colours sweep around in a circle · like the hands of a clock moving, or the slices of a pie chart.

The CSS function is conic-gradient().

Imagine standing at the centre of a room and slowly turning around 360 degrees · the wall changes colour as you spin. That is exactly how a conic gradient works.

Basic syntax:

css

background-image: conic-gradient(color1, color2, ...);

Example · Simplest conic gradient:

css

#box {
  background-image: conic-gradient(red, yellow);
}

What you will see: Starting from the top (12 o'clock position), the colour sweeps clockwise from red all the way around to yellow, completing a full 360-degree rotation.

3.2 Conic Gradient · Multiple Colour Stops

You can include multiple colours, and they will be evenly distributed around the 360-degree circle:

Example · Five colours:

css

#box {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

What you will see: Five colour slices arranged in a full circle, like a colour wheel.

3.3 Conic Gradient · Adding a Starting Angle with `from`

By default, the gradient starts at the top (0 degrees = 12 o'clock). You can rotate the starting point using the from keyword:

css

background-image: conic-gradient(from angle, colors...);

Example · Starting at 90 degrees (3 o'clock position):

css

#box {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}

What you will see: The gradient begins at the right side of the circle (3 o'clock) and sweeps clockwise through red → yellow → green.

3.4 Conic Gradient · Moving the Centre Point

Just like radial gradients, you can move the centre of a conic gradient away from the middle of the element using at:

css

background-image: conic-gradient(from angle at x y, colors...);

Example · Off-centre conic gradient:

css

#box {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
}

What you will see: The sweeping gradient originates from a point slightly right of centre and above centre, creating an asymmetric, dynamic look.

3.5 Creating a Pie Chart with Conic Gradients

This is one of the most powerful real-world uses of conic gradients. By specifying sharp stops (two values at the same position), you can create a clean pie chart with no blending between slices.

How sharp colour stops work:

Normally, conic-gradient(red 40%, blue 40%) would mean:

Red from 0° to 40% of the circle (144°)
Blue picks up exactly where red ends (at 40%), so there is NO blur at the boundary

Example · Simple pie chart (three sections):

css

#pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: conic-gradient(
    red    0%  40%,
    yellow 40% 70%,
    blue   70% 100%
  );
}

What you will see: A perfect pie chart divided into three slices · red (40%), yellow (30%), and blue (30%).

Why border-radius: 50%? This turns the square div into a circle, which is the typical shape for a pie chart.

3.6 Repeating Conic Gradients

The repeating-conic-gradient() function repeats the colour pattern around the circle.

Example · Striped cone pattern:

css

#box {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

What you will see: Alternating red and yellow wedge slices rotating all the way around the circle · like a beach ball or a pinwheel.

Example · Checkerboard pattern using conic gradients:

css

#checkerboard {
  background-image: repeating-conic-gradient(
    #000 0% 25%,
    #fff 25% 50%
  );
  background-size: 60px 60px;
}

What you will see: A black-and-white checkerboard · surprisingly, this is created using a repeating conic gradient tiled with background-size!

✏️ Your Task

Practise what you just learned about CSS Conic Gradients. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 6 of 7

Part 4 · Guided Practice Exercises

🎯 Your Challenge

Exercise 1 · Directional Linear Gradients

Objective: Practice applying linear gradients in different directions.

Scenario: You are styling a news website's article banner. Each article category has a different gradient theme.

Steps:

Create an HTML file with four div elements, each 300px wide and 100px tall.
Apply these gradients, one per div:

✏️ Task

Practise what you just learned about Guided Practice Exercises. Open your editor, type the examples above by hand, modify them, and observe what changes.

css

/* Sports section */
.sports {
  background-image: linear-gradient(to right, #e96c00, #ffd700);
}

/* Technology section */
.tech {
  background-image: linear-gradient(135deg, #0052cc, #00aaff);
}

/* Health section */
.health {
  background-image: linear-gradient(to bottom, #2ecc71, #a8e6cf);
}

/* Entertainment section */
.entertainment {
  background-image: linear-gradient(45deg, #9b59b6, #e056fd);
}

Expected output: Four colourful banners showing gradients going in four different directions.

Self-check questions:

Which direction does 135deg flow? (Hint: imagine a clock hand pointing to 4:30)
What would happen if you changed to right to to left in the sports banner?

What-if challenge: Try adding a third colour to the technology banner between blue and light blue.

Exercise 2 · Fading Overlay Effect

Objective: Use transparency to create a text-readable overlay on a coloured element.

Scenario: A photography website wants a gradient overlay so that white text on the left side remains readable against a coloured image background.

Steps:

Create a div that is 400px wide and 200px tall with a coloured background.
Apply a gradient overlay that fades from a dark semi-transparent colour on the left to fully transparent on the right.

html

<style>
  .photo-card {
    width: 400px;
    height: 200px;
    background-color: #3498db;  /* acts as the "photo" colour */
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0)
    );
    display: flex;
    align-items: center;
    padding: 20px;
  }
  .photo-card h2 {
    color: white;
    margin: 0;
  }
</style>

<div class="photo-card">
  <h2>Lagos at Dawn</h2>
</div>

Expected output: A blue box where the left side has a dark overlay (making the text readable), fading out to pure blue on the right.

Self-check questions:

What does rgba(0, 0, 0, 0.75) mean in plain English?
What would happen if you changed 0.75 to 0.2?

Exercise 3 · Radial Glow Effect

Objective: Create a glowing button using a radial gradient.

Scenario: You are designing a call-to-action button for a tech product page. The button should look like it glows from the centre.

html

<style>
  .glow-button {
    width: 200px;
    height: 60px;
    border: none;
    border-radius: 30px;
    background-image: radial-gradient(
      circle at 50% 50%,
      #00ffcc,
      #007755
    );
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }
</style>

<button class="glow-button">Get Started</button>

Expected output: A pill-shaped button with a bright teal glow in the centre fading to a deep green at the edges.

What-if challenge: Move the glow centre to 20% 30% and observe how it changes the button's appearance.

Exercise 4 · Pie Chart

Objective: Build a simple data visualisation pie chart using a conic gradient.

Scenario: A school's data team wants to show how students spend their time: studying (40%), sleeping (30%), and leisure (30%).

html

<style>
  .pie-chart {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background-image: conic-gradient(
      #e74c3c 0%   40%,   /* Studying - red    */
      #3498db 40%  70%,   /* Sleeping  - blue  */
      #2ecc71 70%  100%   /* Leisure   - green */
    );
  }
</style>

<div class="pie-chart"></div>

Expected output: A circular pie chart with three clearly defined colour sections · no blending between them.

Self-check questions:

Why do we use border-radius: 50% to display a pie chart?
If studying increases to 55%, what values would you use?

Phase 7 of 7

Part 6 · Common Beginner Mistakes

Mistake 1 · Using `background-color` instead of `background-image`

css

/* ❌ WRONG - gradient will NOT work here */
background-color: linear-gradient(red, yellow);

/* ✅ CORRECT */
background-image: linear-gradient(red, yellow);

Why: Gradient functions are values of background-image, not background-color. If you put them under background-color, the browser ignores them and may show no background at all.

Mistake 2 · Forgetting commas between colours

css

/* ❌ WRONG - missing comma between colours */
background-image: linear-gradient(red yellow green);

/* ✅ CORRECT */
background-image: linear-gradient(red, yellow, green);

Why: Each colour stop must be separated by a comma. Without commas, the browser cannot parse the values and will silently fail.

Mistake 3 · Confusing the direction keyword syntax

css

/* ❌ WRONG - 'right' alone is not valid */
background-image: linear-gradient(right, red, yellow);

/* ✅ CORRECT - must use 'to right' */
background-image: linear-gradient(to right, red, yellow);

Why: Direction keywords require the word to before them. The right alone is interpreted as a colour name (which fails), not a direction.

Mistake 4 · Forgetting `border-radius: 50%` when making a pie chart

css

/* ❌ This makes a square conic gradient, not a pie chart */
.pie {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(red 40%, blue 40%);
}

/* ✅ Add border-radius to get the circular pie shape */
.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: conic-gradient(red 40%, blue 40%);
}

Mistake 5 · Confusing `from` (starting angle) with `at` (centre position)

css

/* from = the starting angle of the sweep */
conic-gradient(from 90deg, red, yellow)

/* at = where the centre point is */
conic-gradient(at 20% 50%, red, yellow)

/* Both together */
conic-gradient(from 90deg at 20% 50%, red, yellow)

These are two separate, independent settings. You can use one or both.

Mistake 6 · Using percentage positions in the wrong order

css

/* ❌ WRONG - stops must go in increasing order */
background-image: linear-gradient(red 80%, yellow 20%);

/* ✅ CORRECT - always list positions smallest to largest */
background-image: linear-gradient(red 20%, yellow 80%);

Why: If position values decrease (go backward), the browser clips them to the previous value, which creates unexpected results.

✏️ Your Task

Practise what you just learned about Common Beginner Mistakes. Open your editor, type the examples above by hand, modify them, and observe what changes.

🏗️ Build It — Mini Project

Stage 1 · Setup (HTML Structure)

In this project, you will build a stylish profile card that uses all three gradient types together.

Project Overview: A designer's personal card for a portfolio website.

Stage 1 · Setup (HTML Structure)

Create a file called gradient-card.html with this structure:

starter.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gradient Profile Card</title>
  <style>
    /* styles will go here */
  </style>
</head>
<body>
  <div class="card">
    <div class="card-header">
      <div class="avatar"></div>
      <h2>Amara Okafor</h2>
      <p>UI/UX Designer</p>
    </div>
    <div class="skills">
      <div class="skill-bar" data-skill="Design"></div>
      <div class="skill-bar" data-skill="Code"></div>
      <div class="skill-bar" data-skill="Strategy"></div>
    </div>
    <div class="stats">
      <div class="stat-icon"></div>
      <p>5 Years Experience</p>
    </div>
  </div>
</body>
</html>

Lesson 50 complete! 🎉

You covered:

✅ Lesson Introduction
✅ Prerequisite Concepts
✅ Part 1 · CSS Linear Gradients
✅ Part 2 · CSS Radial Gradients
✅ Part 3 · CSS Conic Gradients
✅ Part 4 · Guided Practice Exercises
✅ Part 6 · Common Beginner Mistakes

← Lesson 49 Lesson 51 →

CSS Gradients · Linear, Radial, and Conic

👋 Welcome to Lesson 50

What is CSS?

What is a CSS property?

What is background-image?

What is a function in CSS?

What is rgba()?

1.1 What Is a Linear Gradient?

1.2 Direction · Top to Bottom (the Default)

1.3 Direction · Bottom to Top

1.4 Direction · Left to Right

1.5 Direction · Diagonal

1.6 Using Angles for Precise Control

1.7 Multiple Colour Stops

1.8 Using Transparency in Gradients

1.9 Repeating Linear Gradients

2.1 What Is a Radial Gradient?

2.2 Radial Gradient · Evenly Spaced Colour Stops

2.3 Radial Gradient · Differently Spaced Colour Stops

2.4 Shape · Circle vs Ellipse

2.5 Size Keywords · Controlling How Far the Gradient Extends

2.6 Changing the Position of the Centre Point

2.7 Repeating Radial Gradients

3.1 What Is a Conic Gradient?

3.2 Conic Gradient · Multiple Colour Stops

3.3 Conic Gradient · Adding a Starting Angle with from

3.4 Conic Gradient · Moving the Centre Point

3.5 Creating a Pie Chart with Conic Gradients

3.6 Repeating Conic Gradients

Exercise 1 · Directional Linear Gradients

Exercise 2 · Fading Overlay Effect

Exercise 3 · Radial Glow Effect

Exercise 4 · Pie Chart

Mistake 1 · Using background-color instead of background-image

Mistake 2 · Forgetting commas between colours

Mistake 3 · Confusing the direction keyword syntax

Mistake 4 · Forgetting border-radius: 50% when making a pie chart

Mistake 5 · Confusing from (starting angle) with at (centre position)

Mistake 6 · Using percentage positions in the wrong order

Stage 1 · Setup (HTML Structure)

Amara Okafor

Lesson 50 complete! 🎉

What is `background-image`?

What is `rgba()`?

3.3 Conic Gradient · Adding a Starting Angle with `from`

Mistake 1 · Using `background-color` instead of `background-image`

Mistake 4 · Forgetting `border-radius: 50%` when making a pie chart

Mistake 5 · Confusing `from` (starting angle) with `at` (centre position)