CSS Gradient

Introduction to CSS Gradient

Hello, here we are going to explore, one the feature of CSS3 that is CSS Gradient.The gradient in CSS3 will help you to cut down your page load by replacing background images with CSS code to achieve better performance without compromising with it’s look and feel.This post includes browser specific syntax and creating a simple, linear and radial gradient.We are going to cover below section under this post.

  • Linear and radial CSS Gradient
  • Diagonal CSS Gradient
  • Adding CSS Gradient to text
  • Creating CSS Pattern with CSS Gradient

Note: Before using gradient in CSS first we have to check which are the browsers are supporting it.You and visit below link and check the list of supported browsers for CSS gradient.


Linear Gradient

Horizontal Linear Gradient

Vertical Linear Gradient

Gradient using multiple color

Gradient Stop

Radial Gradient

Radial with multiple colors

Background Gradient

Diagonal Gradient

CSS Gradient Pattern