Tidadigi Logo

CSS radial-gradient() Function

Hàm radial-gradient() trong CSS được dùng để tạo hiệu ứng nền hấp dẫn. Nó tạo gradient bắt đầu từ tâm và lan tỏa ra ngoài. Mặc định, gradient bắt đầu ở giữa phần tử và mờ dần đến màu cuối ở các cạnh.

Bạn có thể tùy chỉnh hình dạng, kích thước, vị trí và màu sắc của gradient. Điều này giúp thiết kế nền phức tạp và thú vị hơn. Bài viết này giải thích cách hàm radial-gradient() hoạt động, cú pháp của nó và các ví dụ minh họa.

Cú pháp

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

Giá trị tham số

Hàm này chấp nhận nhiều tham số được liệt kê dưới đây:

  • shape: Hình dạng gradient là circle hoặc ellipse (mặc định là ellipse).
  • size: Kích thước của gradient. Các tùy chọn bao gồm:
    • farthest-corner (mặc định)
    • closest-side
    • closest-corner
    • farthest-side
  • position: Điểm bắt đầu của gradient, mặc định là ở trung tâm.
  • colors: Xác định màu bắt đầu, màu kết thúc và các điểm dừng màu ở giữa.

Ví dụ bên dưới minh họa hàm radial-gradient() trong CSS:

Các ví dụ về hàm radial-gradient()

Ví dụ 1: Gradient tỏa tròn cơ bản

Ví dụ này minh họa việc sử dụng nền gradient tỏa tròn với ba màu chuyển đổi. Các màu chuyển từ xanh đậm (#090) sang trắng (#fff) sang xanh đậm hơn (#2a4f32). Văn bản bên trong được căn giữa và tạo kiểu với kích thước và độ đậm khác nhau để nhấn mạnh.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 250px;
            width: 600px;
            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">
            A computer science portal for geeks
        </div>
    </div>
</body>

</html>

Đầu ra:

css-radial-gradient-function

Ví dụ 2: Gradient tỏa tròn tùy chỉnh

Ví dụ này sử dụng gradient tỏa tròn dạng tròn làm nền, chuyển từ xanh lá cây sang trắng rồi đến xanh lam. Văn bản được căn giữa theo chiều dọc và chiều ngang với tiêu đề in đậm và phụ đề nhỏ hơn. Điều này tạo ra bố cục trực quan hấp dẫn với hiệu ứng gradient.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 400px;
            width: 600px;
            background-color: white;
            background-image:
                radial-gradient(circle, green, white, blue);
        }

        .gfg {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 155px;
        }

        .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>

Đầu ra:

css-radial-gradient-function

Hàm radial-gradient() trong CSS cung cấp một cách linh hoạt để tăng cường giao diện trang web. Khi nắm vững cú pháp và tham số, bạn có thể tạo hiệu ứng nền động cải thiện trải nghiệm người dùng. Dù thiết kế cho máy tính hay thiết bị di động, radial-gradient() đều đủ linh hoạt để đạt kết quả tuyệt vời. Vì được hỗ trợ bởi các trình duyệt chính, bạn có thể tự tin kết hợp gradient tỏa tròn vào thiết kế. Điều này giúp đảm bảo giao diện nhất quán và hấp dẫn trên các nền tảng khác nhau.

Trình duyệt được hỗ trợ


Last Updated : 21/07/2025