• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Gradients

← Previous Next →

🔹 What Are CSS Gradients?

CSS Gradients allow you to create smooth transitions between two or more colors without using images. They are used as backgrounds and can be linear, radial, or conic.

🔸 Types of CSS Gradients

  1. Linear Gradients – transition in a straight line

  2. Radial Gradients – transition in a circular pattern

  3. Conic Gradients – transition around a center point

🔸 1. Linear Gradient

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

Directions:

  • to right, to left, to top, to bottom

  • 45deg, 90deg, etc.

background: linear-gradient(45deg, blue, green);

🔸 2. Radial Gradient

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

You can also use ellipse shape:

background: radial-gradient(ellipse, red, blue);

🔸 3. Conic Gradient

div {
  background: conic-gradient(from 0deg, red, yellow, green, red);
}

🟠 Supported in most modern browsers.

🔸 Adding Multiple Color Stops

div {
  background: linear-gradient(to right, red, orange 20%, yellow 40%, green 60%, blue 80%, violet 100%);
}

You can specify where each color starts in percentages.

🔸 Transparency in Gradients

Use rgba() or hsla() for transparency:

background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.2));

🔸 Repeating Gradients

background: repeating-linear-gradient(45deg, red, red 10px, white 10px, white 20px);

Useful for striped or patterned effects.

Practice Questions

Q1. Create a horizontal linear gradient from red to yellow.

Q2. Add a vertical linear gradient from blue to green.

Q3. Create a radial gradient with three colors.

Q4. Apply a conic gradient that loops red, yellow, and blue.

Q5. Use a 45-degree linear gradient from pink to violet.

Q6. Add transparency using rgba() in a linear gradient.

Q7. Make a repeating linear gradient for a stripe pattern.

Q8. Use a radial ellipse gradient for a background.

Q9. Add 5 color stops with varying percentages in a linear gradient.

Q10. Apply a gradient as the background of a button.

CSS Gradients Quiz

Q1: What is a linear gradient?

A. Circle color transition
B. Straight line color transition
C. Shape-based background
D. Solid color only

Q2: Which CSS function creates a circular gradient?

A. linear-gradient()
B. radial-gradient()
C. circle-gradient()
D. ellipse-gradient()

Q3: What does to right mean in a linear gradient?

A. Colors transition from left to right
B. Text moves right
C. Border shifts
D. Background is fixed

Q4: Which of these uses transparency in gradients?

A. hsl()
B. rgb()
C. rgba()
D. hex

Q5: What’s the default shape of a radial gradient?

A. ellipse
B. circle
C. square
D. hexagon

Q6: Which keyword repeats the gradient pattern?

A. repeat-gradient
B. repeating-linear-gradient
C. linear-repeat
D. gradient-loop

Q7: How to apply a conic gradient in CSS?

A. radial-conic-gradient()
B. linear-gradient(angle)
C. conic-gradient()
D. spin-gradient()

Q8: Which value defines gradient angle?

A. degrees (e.g., 45deg)
B. px
C. em
D. opacity

Q9: What is the advantage of using gradients over images?

A. Better SEO
B. No image loading required
C. More text
D. Slower performance

Q10: Which property is used to apply gradients?

A. border-color
B. background
C. color
D. font
← Previous Next →
Login
Go Back Top