• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top