CSS Gradients Practice Questions with Solutions

By /

Introduction

CSS Gradients allow you to create smooth transitions between two or more colors without using image files. Gradients are commonly used for website backgrounds, buttons, banners, cards, and modern UI designs. CSS provides two main types of gradients: Linear Gradients and Radial Gradients. In this chapter, you’ll practice CSS gradients through simple solved CSS Gradients practice questions that are easy for beginners to understand.

Question 1: Create a Linear Gradient Background

Problem Statement

Write CSS to create a linear gradient from red to yellow.

CSS Code

div {    background: linear-gradient(red, yellow);}

Output

The <div> displays a background that smoothly changes from red to yellow.

Explanation

  • linear-gradient() creates a straight-line color transition.
  • The first color starts the gradient.
  • The second color is the ending color.

Question 2: Create a Horizontal Linear Gradient

Problem Statement

Write CSS to create a gradient that moves from left to right.

CSS Code

div {    background: linear-gradient(toright, blue, green);}

Output

The background changes smoothly from blue on the left to green on the right.

Explanation

  • to right changes the gradient direction.
  • The gradient begins on the left and ends on the right.
  • Direction keywords make gradients easy to control.

Question 3: Create a Vertical Linear Gradient

Problem Statement

Write CSS to create a gradient from top to bottom.

CSS Code

div {    background: linear-gradient(tobottom, orange, white);}

Output

The background changes smoothly from orange at the top to white at the bottom.

Explanation

  • to bottom creates a vertical gradient.
  • This is the default direction for linear gradients.
  • Vertical gradients are often used for webpage backgrounds.

Question 4: Create a Gradient Using an Angle

Problem Statement

Write CSS to create a gradient at a 45-degree angle.

CSS Code

div {    background: linear-gradient(45deg, purple, pink);}

Output

The background displays a diagonal gradient from purple to pink.

Explanation

  • 45deg sets the gradient angle.
  • Angled gradients create stylish backgrounds.
  • Any degree value can be used.

Question 5: Create a Gradient with Three Colors

Problem Statement

Write CSS to create a linear gradient using red, yellow, and green.

CSS Code

div {    background: linear-gradient(red, yellow, green);}

Output

The background smoothly changes from red to yellow, then to green.

Explanation

  • Multiple colors can be added inside linear-gradient().
  • The browser blends the colors smoothly.
  • Three-color gradients are commonly used in modern UI designs.

Question 6: Create a Radial Gradient

Problem Statement

Write CSS to create a radial gradient from white at the center to blue at the edges.

CSS Code

div {    background: radial-gradient(white, blue);}

Output

The <div> displays a radial gradient that starts with white in the center and gradually changes to blue toward the edges.

Explanation

  • radial-gradient() creates a circular or elliptical color transition.
  • The first color starts at the center.
  • The second color appears toward the outside.

Question 7: Create a Circular Radial Gradient

Problem Statement

Write CSS to create a circular radial gradient using yellow and red.

CSS Code

div {    background: radial-gradient(circle, yellow, red);}

Output

The background displays a circular gradient from yellow to red.

Explanation

  • circle creates a perfectly circular gradient.
  • Without specifying a shape, the browser chooses the default.
  • Circular gradients are commonly used for spotlight effects.

Question 8: Repeat a Linear Gradient

Problem Statement

Write CSS to create a repeating linear gradient using blue and white.

CSS Code

div {    background: repeating-linear-gradient(blue0px, white20px);}

Output

The background displays alternating blue and white stripes repeatedly.

Explanation

  • repeating-linear-gradient() repeats the color pattern.
  • Color stops define where each color begins and ends.
  • This effect is useful for decorative backgrounds.

Question 9: Repeat a Radial Gradient

Problem Statement

Write CSS to create a repeating radial gradient using white and gray.

CSS Code

div {    background: repeating-radial-gradient(white, gray20%);}

Output

The background displays repeating circular rings of white and gray.

Explanation

  • repeating-radial-gradient() repeats the radial color pattern.
  • The percentage controls the spacing between color stops.
  • It is useful for creating decorative textures.

Question 10: Create a Transparent Gradient

Problem Statement

Write CSS to create a gradient that fades from black to transparent.

CSS Code

div {    background: linear-gradient(black, transparent);}

Output

The background smoothly fades from black into transparent.

Explanation

  • transparent represents a fully transparent color.
  • Transparent gradients are commonly used for overlays.
  • They help improve text readability on images.

Key Takeaways

  • linear-gradient() creates straight-line color transitions.
  • radial-gradient() creates circular or elliptical gradients.
  • Gradient direction can be controlled using keywords or angles.
  • Multiple colors can be combined in a single gradient.
  • repeating-linear-gradient() repeats linear patterns.
  • repeating-radial-gradient() repeats circular patterns.
  • transparent creates fade effects.
  • CSS gradients reduce the need for background images.

Frequently Asked Questions (FAQs)

1. What are CSS gradients?

CSS gradients create smooth transitions between two or more colors without using image files.

2. Which function creates a linear gradient?

Use:

background: linear-gradient(red, blue);

3. Which function creates a radial gradient?

Use:

background: radial-gradient(white, blue);

4. How do I change the direction of a linear gradient?

Use a direction keyword or an angle.

Example:

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

5. Can I use more than two colors in a gradient?

Yes. CSS gradients support multiple color stops.

Example:

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

6. What is the purpose of transparent in gradients?

transparent creates fade effects that are useful for overlays, banners, and improving text readability on images.

7. Where are CSS gradients commonly used?

CSS gradients are commonly used for:

  • Website backgrounds
  • Buttons
  • Hero sections
  • Cards
  • Banners
  • Navigation bars
  • Modern UI designs

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top