Gradient 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:−

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à: