css - Gradients

CSS Gradients allow you to create smooth transitions between two or more colors without relying on images. Gradients are applied to the background of elements using the background or background-image properties.

Types of CSS Gradients

Linear Gradient

Radial Gradient

Conic Gradient

1. Linear Gradient

A linear gradient transitions colors along a straight line.

Syntax:

background: linear-gradient(direction, color1, color2, ...);

Example: Basic Linear Gradient

<div style="width: 300px; height: 200px; background: linear-gradient(to right, red, yellow);"></div>

Explanation:

to right: Specifies the direction (left to right).

Colors red and yellow transition smoothly.

Advanced Example: Angled Gradient

<div style="width: 300px; height: 200px; background: linear-gradient(45deg, blue, green);"></div>

45deg: Specifies a 45-degree angle.

2. Radial Gradient

A radial gradient transitions colors outward from a central point.

Syntax:

background: radial-gradient(shape size at position, color1, color2, ...);

Example: Circular Radial Gradient

<div style="width: 300px; height: 200px; background: radial-gradient(circle, red, yellow, blue);"></div>

Explanation:

circle: The gradient is circular.

Colors transition from red at the center to yellow and then blue.

Advanced Example: Elliptical Gradient

<div style="width: 300px; height: 200px; background: radial-gradient(ellipse at center, pink, purple);"></div>

ellipse: The gradient is elliptical.

at center: The center of the ellipse is the element's center.

3. Conic Gradient

A conic gradient rotates colors around a central point.

Syntax:

background: conic-gradient(color1, color2, ...);

Example: Basic Conic Gradient

<div style="width: 300px; height: 200px; background: conic-gradient(red, yellow, green);"></div>

Explanation:

Colors transition in a circular manner.

Advanced Example: Conic Gradient with Angles

<div style="width: 300px; height: 200px; background: conic-gradient(from 90deg, blue, green, yellow, red);"></div>

from 90deg: The gradient starts at 90 degrees.

Customizing Gradients

Adding Multiple Color Stops

You can include multiple colors with precise stops.

Example: Multiple Stops

<div style="width: 300px; height: 200px; background: linear-gradient(to right, red 20%, yellow 50%, green 80%);"></div>

red 20%: Red occupies 20% of the gradient.

yellow 50% and green 80%: Define the other stops.

Transparency in Gradients

Add transparency with RGBA or opacity.

Example: Transparent Gradient

<div style="width: 300px; height: 200px; background: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));"></div>

Colors transition with 50% transparency.

Repeating Gradients

Use repeating-linear-gradient, repeating-radial-gradient, or repeating-conic-gradient for repeating patterns.

Example: Repeating Linear Gradient

<div style="width: 300px; height: 200px; background: repeating-linear-gradient(to right, red, yellow 20px, green 40px);"></div>

Colors repeat every 40px.

Browser Compatibility

Most modern browsers support CSS gradients. Ensure you test for older browsers or use fallback colors/images.

Conclusion

CSS Gradients are a flexible way to enhance your web designs without using images. Experiment with linear, radial, and conic gradients to create stunning visual effects!