CSS3 Gradients
What is Gradients?
Gradients displays the combination of two or more colors as shown below –
· Curiosity blue
· Ukraine
· Green to dark
· Fresh Turboscent
· Koko Caramel
· Virgin America
· Portrait
· Turquoise flow
· Vine
· Flickr
· Twitch
· Pastel Orange at the Sun
· Endless River
· Predawn
· Purple Bliss
· Talking To Mice Elf
· Hersheys
· Crazy Orange I
· Between The Clouds
· Metallic Toad
· Martini
· Friday
· ServQuick
· Behongo
· SoundCloud
· Facebook Messenger
· Shore
· Cheer Up Emo Kid
· Amethyst
· Man of Steel
· Neon Life
· Teal Love
· Red Mist
· Starfall
· Dance To Forget
· Parklife
· Cherryblossoms
· Shadow Night
· Ash
· Virgin
· Earthly
· Dirty Fog
· The Strain
· Reef
· Candy
· Autumn
· Winter
· Forever Lost
· Almost
· Moor
· Aqualicious
· Misty Meadow
· Kyoto
· Sirius Tamed
· Jonquil
· Petrichor
· A Lost Memory
· Vasily
· Blurry Beach
· Namn
· Day Tripper
· Pinot Noir
· Miaka
· Army
· Shrimpy
· Influenza
· Calm Darya
· Bourbon
· Stellar
· Clouds
· Moonrise
· Peach
· Dracula
· Mantle
· Titanium
· Opa
· Sea Blizz
· Midnight City
· Mystic
· Shroom Haze
· Moss
· Bora Bora
· Venice Blue
· Electric Violet
· Kashmir
· Steel Gray
· Mirage
· Juicy Orange
· Mojito
· Cherry
· Pinky
· Sea Weed
· Purple Paradise
· Sunrise
· Aqua Marine
· Aubergine
· Bloody Mary
· Mango Pulp
· Frozen
· Rose Water
· Horizon
· Lemon Twist
· Emerald Water
Colour 1: #780206
Colour 2: #061161
Adding a gradient is easy. All gradients are read from a gradients.json
file which is available in this
project's repo. Simply add your gradient details to it and submit a pull
request.
background: -webkit-linear-gradient(90deg, #780206 10%, #061161 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #780206 10%, #061161 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #780206 10%, #061161 90%); /* IE10 */
background: -o-linear-gradient(90deg, #780206 10%, #061161 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #780206 10%, #061161 90%); /* W3C */
Types of gradients
Linear gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom
Top to bottom
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Left to right
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Diagonal
Diagonal starts at top left and right button
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Multi color
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id="grad2"></div>
</body>
</html>
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>
<div id="grad1"></div>
</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>
<div id="grad1"></div>
</body>
</html>