Gradients in css

Gradients in CSS are used to create smooth transitions between two or more colors. Instead of using solid colors, gradients allow designers to blend colors to create appealing backgrounds, borders, or even text effects. CSS provides two main types of gradients:

1. Linear Gradients
2. Radial Gradients

1. Linear Gradients

A linear gradient transitions along a straight line (horizontal, vertical, diagonal, etc.).

Syntax:

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

• direction: Specifies the direction of the gradient (optional). Default is top to bottom.
• color-stop: Defines the colors and their transition points.

Basic Linear Gradient

<style>
  div{
    background: linear-gradient(to right, red, yellow);
    height: 100vh;
    margin: 0;
  }
</style>
<div>linear-gradient</div>

This creates a gradient that transitions from red on the left to blue on the right.

Vertical Linear Gradient

<style>
  div{
    background: linear-gradient(to bottom, red, yellow);
    height: 100vh;
    margin: 0;
  }
</style>
<div>linear-gradient</div>

background: linear-gradient(to bottom, green, yellow);

Diagonal Gradient

<style>
  div{
   background: linear-gradient(45deg, purple, pink);
    height: 100vh;
    margin: 0;
  }
</style>
<div>linear-gradient</div>

This creates a gradient that transitions diagonally at a 45-degree angle from purple to pink.

2. Radial Gradients

A radial gradient transitions outward in a circular or elliptical pattern from a center point.

Syntax:

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

• shape: Can be circle or ellipse (default).
• size: Specifies the size of the gradient (optional).
• position: Sets the starting point (optional). Default is the center of the element.

Basic Radial Gradient

<style>
  div{
   background: radial-gradient(circle, red, blue);
    height: 100vh;
    margin: 0;
  }
</style>
<div>radial-gradient</div>

This creates a circular gradient transitioning from red at the center to blue at the edges.

Radial Gradient with Multiple Colors

<style>
  div{
  background: radial-gradient(circle, yellow, green, blue);
    height: 100vh;
    margin: 0;
  }
</style>
<div>radial-gradient</div>

This creates a gradient with a transition from yellow to green to blue.

Gradient Transparency

You can also use transparent or specify RGBA colors for transparent gradients.

Gradient with Transparency

<style>
  div{
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
    height: 100vh;
    margin: 0;
  }
</style>
<div>linear-gradient</div>

This creates a semi-transparent gradient from red to blue, where both colors have 50% opacity.

Browser Support

CSS gradients are widely supported by modern browsers. Older browsers may require vendor prefixes like -webkit- for better compatibility.