Gradient là gì ?
Gradient biểu thị sự kết hợp của hai hay nhiều màu, như dưới đây:
Curiosity blue
Ukraine
Green to dark
Fresh Turboscent
Koko Caramel
Virgin America
Portrait
Turquoise flow
Vine
Flickr
Instagram
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
Các loại Gradient trong CSS
- Linear Gradient(down/up/left/right/diagonally)
- Radial Gradient
Linear Gradient trong CSS
Linear Gradient được sử dụng để sắp xếp hai hay nhiều màu trong các định dạng tuyến, ví dụ như dạng từ trên xuống dưới (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>Kết quả là:
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>Kết quả là:
Diagonal trong CSS
Diagonal bắt đầu từ góc trái trên cùng và góc phải dưới cùng.
<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>Kết quả là:
Multi color trong CSS
<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>Kết quả là:
Radial Gradient trong CSS
Radial Gradient xuất hiện tại vị trí trung tâm.
<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>Kết quả là:
Repeat Radial Gradient trong CSS
<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>Kết quả là:
