Views

Report Content

×
24

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 

<span class="property">linear-gradient</span>(direction, color-stop1, color-stop2, ...);

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


<span class="property">background</span>: <span class="value">linear-gradient(to bottom, <span class="unit">#</span>ff0000, <span class="unit">#</span>00ff00);</span>

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


<span class="property">background</span>: <span class="value">linear-gradient(to right, <span class="unit">#</span>ffcc00, <span class="unit">#</span>33cc33);</span>

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


<span class="property">background</span>: <span class="value">linear-gradient(to bottom right, <span class="unit">#</span>3366cc, <span class="unit">#</span>cc33ff);</span>

Example 4 - Multiple Color Stops:


<span class="property">background</span>: <span class="value">linear-gradient(to right, <span class="unit">#</span>ff0000, <span class="unit">#</span>ffff00, <span class="unit">#</span>00ff00);</span>

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 

<span class="property">radial-gradient</span>(shape size at position, color-stop1, color-stop2, ...);

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


<span class="property">background</span>: <span class="value">radial-gradient(circle, <span class="unit">#</span>ff9900, <span class="unit">#</span>ffcc00);</span>

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


<span class="property">background</span>: <span class="value">radial-gradient(ellipse, <span class="unit">#</span>ff3366, <span class="unit">#</span>ff6699);</span>

Example 3 - Radial Gradient at Specific Position:


<span class="property">background</span>: <span class="value">radial-gradient(at 30<span class="unit">%</span> 70<span class="unit">%</span>, #00ccff, <span class="unit">#</span>99cc00);</span>

Example 4 - Multiple Color Stops:


<span class="property">background</span>: <span class="value">radial-gradient(circle, <span class="unit">#</span>ff0000, <span class="unit">#</span>ffff00, <span class="unit">#</span>00ff00);</span>

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.

Share and Join the Discussion

You need to be logged in to participate in this discussion.

×
×