start learning
Image 1
24

CSS GRADIENT


A CSS gradient is a way to fill an element with a smooth transition of colors, creating a visually pleasing effect. Gradients can be used for backgrounds, text, borders, and other CSS properties. There are two main types of gradients in CSS: linear gradients and radial gradients.

Let's explore each with examples:

Linear Gradients

Linear gradients create a gradient effect along a straight line, typically from top to bottom or left to right. They are defined using the linear-gradient function and can include 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);

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 just some basic examples of how to use linear and radial gradients in CSS. You can customize the direction, size, position, and colors to achieve various gradient effects. Gradients are a versatile tool for creating visually appealing designs in web development.

×