CSS Gradients



The CSS3 gradient options provides a best solution to generate beautuful transitions between two or more colors.

Using CSS3 gradients you'll be able to reduce the download time and saves the bandwidth usages. the weather with gradients is scaled up or right down to any extent without losing the standard, also the output will render much faster because it's generated by the browser.

linear-gradient(direction, color-stop1, color-stop2, ...)

CSS Linear Gradient - Top to Bottom

Example

<!DOCTYPE html>
	<html>
	<head>
	<title> Linear Gradients from Top to Bottom</title>
	<style>      
		.gradient {
			width: 400px;
			height: 300px;
			/* Fallback for browsers that don't support gradients */
			background: red;
			/* For Safari 5.1 to 6.0 */
			background: -webkit-linear-gradient(purple, red);
			/* For Internet Explorer 10 */
			background: -ms-linear-gradient(purple, red);
			/* Standard syntax */
			background: linear-gradient(purple, red);
		}
	</style>
	</head>
	<body>
		<div class="gradient"></div>
	</body>
	</html> 
	


Click on the "Run This Code" button to see how it works.


CSS Linear Gradient - Left to Right

Example

<!DOCTYPE html>
	<html>
	<head>
	<title>Linear Gradients from Left to Right</title>
	<style>      
		.gradient {
			width: 400px;
			height: 300px;
			/* Fallback for browsers that don't support gradients */
			background: red;
			/* For Safari 5.1 to 6.0 */
			background: -webkit-linear-gradient(left, purple, red);
			/* For Internet Explorer 10 */
			background: -ms-linear-gradient(left, purple, red);
			/* Standard syntax */
			background: linear-gradient(to right, purple, red);
		}
	</style>
	</head>
	<body>
		<div class="gradient"></div>
	</body>
	</html> 
	


Click on the "Run This Code" button to see how it works.





CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units