• Sea Weed • Purple Paradise • Sunrise • Aqua Marine • Aubergine • Bloody Mary • Mango Pulp • Frozen • Rose Water • Horizon • Lemon Twist • Emerald Water Copy to clipboard Các loại Gradi
Trang 1Gradient trong CSS 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
• 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
Trang 2• 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
Trang 3• Sea Weed
• Purple Paradise
• Sunrise
• Aqua Marine
• Aubergine
• Bloody Mary
• Mango Pulp
• Frozen
• Rose Water
• Horizon
• Lemon Twist
• Emerald Water
Copy to clipboard
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: -
-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:
- -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à:
Trang 4Diagonal 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: - -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: - -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: - -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: - -repeating-radial
-gradient(blue, yellow 10%, green 15%); background: -moz-repeating
-radial-gradient(blue, yellow 10%, green 15%); background:
Trang 5Kết quả là: