W3 Mind Logo
Home » What’s CSS3 Gradient (How To + Examples)

What’s CSS3 Gradient (How To + Examples)

CSS3 gradients allow you to create smooth transitions between two or more specified colors. CSS3 gradients come in two main types: linear gradients and radial gradients. Here are examples of both:

Linear Gradient:

A linear gradient creates a gradient effect along a straight line. You can specify the direction and colors for the gradient.

Example 1 – Vertical Linear Gradient:

				
					background-image: linear-gradient(to bottom, #ff0000, #00ff00);
				
			

Example 2 – Diagonal Linear Gradient:

				
					background-image: linear-gradient(45deg, #ff0000, #00ff00);
				
			

Radial Gradient:

A radial gradient creates a gradient effect radiating from a central point.

Example 3 – Simple Radial Gradient:

				
					background-image: radial-gradient(circle, #ff0000, #00ff00);
				
			

Example 4 – Elliptical Radial Gradient:

				
					background-image: radial-gradient(ellipse at center, #ff0000, #00ff00);
				
			
About Author
Picture of W3Mind

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.
Give it a Share
Facebook
Twitter
LinkedIn
You May Also Like
How to
START A
BLOG
(step by step)
Load WordPress Sites in as fast as 37ms!