Tidadigi Logo

CSS Gradients

CSS gradients cho phép bạn tạo chuyển đổi mượt mà giữa hai hoặc nhiều màu sắc. Điều này giúp các phần tử web của bạn trở nên hấp dẫn hơn về mặt thị giác. Mỗi loại gradient pha trộn màu theo những cách khác nhau giúp bạn cải thiện thiết kế. Học cách sử dụng chúng sẽ cho bạn nhiều quyền kiểm soát giao diện trang web hơn.

Types of Gradients

Các Gradients có thể được phân loại thành 3 loại:

  1. Linear Gradients
  2. Radial Gradients
  3. Conic Gradients

Ở đây chúng ta sẽ nghiên cứu từng thuộc tính một cách chi tiết.

. Linear Gradients

Linear gradients bao gồm các chuyển đổi màu mượt mà có thể đi lên, xuống, trái, phải hoặc theo đường chéo. Bạn cần ít nhất hai màu để tạo một linear gradient, nhưng có thể thêm nhiều màu hơn. Điểm bắt đầu và hướng là rất quan trọng để tạo hiệu ứng gradient này.

Syntax:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

The linear-gradient can be implemented in the following ways:

1. Top to Bottom:

Trong hình ảnh này, chuyển đổi bắt đầu với màu trắng và kết thúc với màu xanh lá cây. Khi đổi chỗ trình tự màu, chuyển đổi sẽ bắt đầu bằng màu xanh lá cây và kết thúc bằng màu trắng.

Example: Ví dụ này minh họa linear-gradient bắt đầu từ trên cùng & kết thúc ở dưới cùng. Nó bắt đầu từ màu trắng, chuyển dần sang màu xanh lá cây.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 200px;
        background-color: white;
        background-image: linear-gradient(white, green);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output: 

css-gradients

2. Left to Right:

Trong hình ảnh này, chuyển đổi bắt đầu từ trái sang phải. Nó bắt đầu từ màu trắng chuyển sang màu xanh lá cây.

Example: Ví dụ này minh họa linear-gradient bắt đầu từ bên trái & kết thúc ở bên phải.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 200px;
        background-color: white;
        background-image: linear-gradient(to right, white, green);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients

3. Diagonal:

Chuyển đổi này bắt đầu từ trên cùng bên trái xuống dưới cùng bên phải. Nó bắt đầu với màu xanh lá cây chuyển sang màu trắng. Đối với diagonal gradient, cần chỉ định cả vị trí bắt đầu ngang và dọc.

Example: Ví dụ này minh họa linear-gradient với chuyển đổi đường chéo bằng cách chỉ định cả vị trí bắt đầu ngang và dọc.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 200px;
        background-color: white;
        background-image: linear-gradient(to bottom right, 
          green, rgba(183, 223, 182, 0.4));
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients

4. Repeating Linear Gradient:

CSS cho phép người dùng triển khai nhiều linear gradient bằng một hàm duy nhất repeating-linear-gradient(). Hình ảnh ở đây chứa 3 màu trong mỗi chuyển đổi với một số giá trị phần trăm.

Example: Ví dụ này minh họa linear-gradient với hiệu ứng chuyển đổi lặp lại bằng cách triển khai nhiều màu.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 200px;
        background-color: white;
        background-image: repeating-linear-gradient(#090, 
                                      #fff 10%, #2a4f32 20%);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients

5. Angles on Linear Gradients:

CSS cho phép người dùng triển khai các hướng trong Linear Gradients. Thay vì giới hạn bản thân với các hướng được xác định trước.

Example: Ví dụ này minh họa linear-gradient bằng cách triển khai hướng trên linear gradients.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 200px;
        background-color: white;
        background-image: repeating-linear-gradient(-45deg, #090, 
                                                    #2a4f32 10%);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients

. CSS Radial Gradients:

Radial gradients bắt đầu từ một điểm trung tâm và tỏa ra ngoài. Theo mặc định, chúng tạo thành hình elip, bắt đầu từ tâm và mờ dần về phía các cạnh.

Syntax:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

radial-gradient có thể được triển khai theo các cách sau:

1. Radial Gradient - evenly spaced color stops:

Trong CSS, theo mặc định, độ mờ xảy ra với tốc độ bằng nhau. Hình sau đây cho thấy Radial Gradient với các color stops cách đều nhau.

Color stops: Color stops thông báo cho trình duyệt biết màu nào cần sử dụng. Tại điểm bắt đầu của gradient & nơi dừng lại. Theo mặc định, chúng cách đều nhau nhưng chúng ta có thể ghi đè bằng cách cung cấp color stops cụ thể.

Example: Ví dụ này minh họa radial-gradient có các color stops cách đều nhau.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 350px;
        width: 700px;
        background-color: white;
        background-image: radial-gradient(#090, 
                                  #fff, #2a4f32);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients

2. Radial Gradient- unevenly spaced color stops:

CSS cho phép người dùng có sự thay đổi về khoảng cách của các color stops. Trong khi áp dụng tính năng radial-gradient.

Example: Ví dụ này minh họa radial-gradient có các color stops cách nhau không đều.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 350px;
        width: 100%;
        background-color: white;
        background-image: radial-gradient(#090 
                              40%, #fff, #2a4f32);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients

. CSS Conic Gradients:

Không giống như radial gradients, conic gradient được xác định bằng các màu chuyển tiếp theo hình tròn. Nó xoay quanh một điểm trung tâm để hoàn thành vòng quay 360 độ. Theo mặc định, điểm trung tâm sẽ được định vị ở giữa vùng chứa (50%, 50%). Tương tự như linear gradients, conic gradients có thể được xoay bằng cách xác định giá trị góc.

Syntax:

background-image: conic-gradient(from angle at position, start-color, ..., last-color);

conic-gradient có thể được triển khai theo các cách sau:

1. Angles on Conic Gradients:

CSS cho phép người dùng triển khai xoay (theo chiều kim đồng hồ) của conic gradients.

Example: Ví dụ này minh họa conic gradient với góc xoay 45 độ. Trong đó tọa độ (x, y) của điểm trung tâm lần lượt là 50% và 50% kích thước vùng chứa.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 350px;
        width: 100%;
        background-color: white;
        background-image: conic-gradient(from 45deg at 50% 50%, #090, #fff, #2a4f32);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients

2. Repeating Conic Gradient:

CSS cũng cho phép người dùng triển khai nhiều conic gradients bằng hàm repeating-conic-gradient().

Example: Ví dụ này minh họa conic-gradient trước đó được lặp lại năm lần.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 350px;
        width: 100%;
        background-color: white;
        background-image: repeating-conic-gradient(from 45deg at 50% 50%, #009900ff 0%, #ffffffff 10%, #2a4f32ff 20%);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients

Overlaying Gradients

Bạn có thể thêm nhiều gradients trong một background duy nhất và điều chỉnh độ trong suốt màu để tạo hiệu ứng nâng cao hơn. Vì việc thiết kế các gradient này có thể khó khăn, hãy sử dụng CSS gradient editor để giúp quá trình thiết kế dễ dàng hơn.

Example: Ví dụ này minh họa ba gradient xếp chồng lên nhau: repeating conic gradient ở trên cùng. Tiếp theo là linear gradient và radial gradient ở dưới cùng.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main {
        height: 350px;
        width: 100%;
        background-color: white;
        background-image: 
repeating-conic-gradient(from 0deg at 50% 50%, #008a9933 0% 12.5%, #ffffff33 12.5%, #2a445133 25%), 
linear-gradient(360deg, #9936004d 0% 50%, #ffffff4d 100%), 
radial-gradient(circle farthest-corner at 50% 50%, #009900ff 0% 50%, #ffffffff 50%, #2a4f32ff 100%);
    }
    
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
    
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
          A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Output:

css-gradients


CSS gradients được sử dụng để tạo các phần tử web hấp dẫn về mặt thị giác. Bài viết này đề cập đến linear, radial và conic gradients. Cùng với các ví dụ thực tế và cách triển khai chúng.

Supported Browser

Dưới đây là các trình duyệt hỗ trợ CSS gradients:

Lưu ý: CSS gradients được hỗ trợ trong hầu hết các trình duyệt hiện đại. Nhưng các phiên bản cũ hơn, đặc biệt là Internet Explorer, có thể hỗ trợ hạn chế. Hoặc không hỗ trợ một số loại gradient nhất định, hãy luôn kiểm tra thiết kế của bạn về khả năng tương thích.


Last Updated : 21/07/2025