CSS Tutorial
CSS Advanced
CSS3 Tutorial
CSS Responsive
CSS References
CSS tools
CSS Resources
Selected Reading
- CSS - Scrollbars
- CSS - Dimension
- CSS - Outlines
- CSS - Cursors
- CSS - Padding
- CSS - Lists
- CSS - Margins
- CSS - Borders
- CSS - Tables
- CSS - Links
- CSS - Images
- CSS - Text
- CSS - Fonts
- CSS - Backgrounds
- CSS - Colors
- CSS - Measurement Units
- CSS - Inclusion
- CSS - Syntax
- CSS - Introduction
- CSS - Home
CSS Advanced
- CSS - Validations
- CSS - Layouts
- CSS - Printing
- CSS - Aural Media
- CSS - Paged Media
- CSS - Media Types
- CSS - Text Effects
- CSS - @ Rules
- CSS - Pseudo Elements
- CSS - Pseudo Classes
- CSS - Layers
- CSS - Positioning
- CSS - Visibility
CSS3 Tutorial
- CSS3 - Box Sizing
- CSS3 - User Interface
- CSS3 - Multi columns
- CSS3 - Animation
- CSS3 - 3d transform
- CSS3 - 2d transform
- CSS3 - Web font
- CSS3 - Text
- CSS3 - Shadow
- CSS3 - Gradients
- CSS3 - Color
- CSS3 - Multi Background
- CSS3 - Border Images
- CSS3 - Rounded Corner
- CSS3 - Tutorial
CSS Responsive
CSS References
- CSS - Animation
- CSS - Units
- CSS - Web safe fonts
- CSS - Web browser References
- CSS - Color References
- CSS - References
- CSS - Quick Guide
- CSS - Questions and Answers
CSS tools
CSS Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
CSS3 - Gradients
CSS3 - Gradients
What is Gradients?
Gradients displays the combination of two or more colors as shown below −
Types of gradients
Linear Gradients(down/up/left/right/diagonally)
Radial Gradients
Linear gradients
Linear gradients are used to arrange two or more colors in pnear formats pke top to bottom.
Top to bottom
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-pnear-gradient(pink,green);
background: -o-pnear-gradient(pink,green);
background: -moz-pnear-gradient(pink,green);
background: pnear-gradient(pink,green);
}
</style>
</head>
<body>
<span id = "grad1"></span>
</body>
</html>
It will produce the following result −
Left to right
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-pnear-gradient(left, red , blue);
background: -o-pnear-gradient(right, red, blue);
background: -moz-pnear-gradient(right, red, blue);
background: pnear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<span id = "grad1"></span>
</body>
</html>
It will produce the following result −
Diagonal
Diagonal starts at top left and right button.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-pnear-gradient(left top, red , blue);
background: -o-pnear-gradient(bottom right, red, blue);
background: -moz-pnear-gradient(bottom right, red, blue);
background: pnear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<span id = "grad1"></span>
</body>
</html>
It will produce the following result −
Multi color
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-pnear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-pnear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-pnear-gradient(red, orange, yellow, red, blue, green,pink);
background: pnear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<span id = "grad2"></span>
</body>
</html>
It will produce the following result −
CSS3 Radial Gradients
Radial gradients appears at center.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<span id = "grad1"></span>
</body>
</html>
It will produce the following result −
CSS3 Repeat Radial Gradients
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<span id = "grad1"></span>
</body>
</html>
It will produce the following result −
Advertisements