CSS Gradients

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

CSS Gradients

CSS gradients are a powerful feature of CSS that allows developers to create smooth transitions between two or more colors. This feature is used to create a wide range of visual effects, such as background images, buttons, and text shadows.

CSS gradients can be used to create linear or radial transitions between colors. A linear gradient is created by specifying the start and end points of the transition, while a radial gradient is created by specifying the center point and the radius of the transition. These gradients can be used to create a variety of visual effects, such as background images, buttons, and text shadows.

CSS gradients let you display smooth transitions between two or more specified colors.

There are two type for use Gradient:

Linear Gradients

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

p {
    background: linear-gradient(blue, yellow);
}

Linear Gradiant

p{
  background: linear-gradient(to left, red, yellow, green,blue);
}

Linear Gradiant

p{
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%)
}

Linear Gradiant

Radial Gradients

The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function’s result is an object of the <gradient> data type, which is a special kind of <image>.

p{
  background: radial-gradient(yellow, green);
}

Radial Gradiant

p{
  background: radial-gradient(closest-side, red, green, yellow);
}

Radial Gradiant

p{   
    background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
}

Radial Gradiant

p{  
   background: radial-gradient(ellipse at top, #e66465, transparent),
   radial-gradient(ellipse at bottom, #4d9f0c, transparent);
}

Radial Gradiant