Gradient trong CSS

Trang trước
Trang sau  

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

Quảng cáo

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

Quảng cáo

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

Công cụ giáo viên (2048.VN)

Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free

Tạo đề, số hóa đề thi từ PDF/Word/Excel Nhập đề nhanh, trích xuất nội dung tự động. Trộn đề thành nhiều mã, Download/In đề thi offline Tạo nhiều mã đề khác nhau, xuất file hoặc in dễ dàng. Quản lý lớp học Theo dõi học sinh, điểm số và kết quả học tập trực quan. Giao bài tập, tổ chức thi kiểm tra trực tuyến Giao bài, chấm điểm và thống kê kết quả ngay trên hệ thống.
Khám phá công cụ
Trang trước
Trang sau  
Bài viết liên quan