CSS GRADIENT

A CSS gradient fills an element with a smooth transition between colors, making it visually appealing. Gradients can be used for backgrounds, text, borders, and more. The two main types are linear gradients and radial gradients.

Let's look at each type with examples:

1. Linear Gradients

Linear gradients create color transitions along a straight line, usually from top to bottom or left to right. They are made using the linear-gradient function and can have multiple color stops.

Syntax


linear-gradient(direction, color-stop1, color-stop2, ...);

Example 1 - Vertical Linear Gradient (Top to Bottom):


background: linear-gradient(to bottom, #ff0000, #00ff00);

Example 2 - Horizontal Linear Gradient (Left to Right):


background: linear-gradient(to right, #ffcc00, #33cc33);

Example 3 - Diagonal Linear Gradient (Top-left to Bottom-right):


background: linear-gradient(to bottom right, #3366cc, #cc33ff);

Example 4 - Multiple Color Stops:


background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);

2. Radial Gradients

Radial gradients create a circular or elliptical gradient effect, radiating from a single point. They are defined using the radial-gradient function and can also include multiple color stops.

Syntax


radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Example 1 - Basic Radial Gradient (Center to Edges):


background: radial-gradient(circle, #ff9900, #ffcc00);

Example 2 - Elliptical Radial Gradient (Center to Edges):


background: radial-gradient(ellipse, #ff3366, #ff6699);

Example 3 - Radial Gradient at Specific Position:


background: radial-gradient(at 30% 70%, #00ccff, #99cc00);

Example 4 - Multiple Color Stops:


background: radial-gradient(circle, #ff0000, #ffff00, #00ff00);

These are basic examples of using linear and radial gradients in CSS. You can customize the direction, size, position, and colors to create different gradient effects. Gradients are a flexible tool for enhancing the visual appeal of web designs.

Note: We aim to make learning easier by sharing top-quality tutorials, but please remember that tutorials may not be 100% accurate, as occasional mistakes can happen. Once you've mastered the language, we highly recommend consulting the official documentation to stay updated with the latest changes. If you spot any errors, please feel free to report them to help us improve.