Tạo ra Radial Gradient bằng CSS

Radial Gradient

Tạo ra Radial Gradient cũng cần định nghĩa hai điểm dừng màu, Radial Gradient được định nghĩa bằng tâm của nó. Cú pháp tạo ta radial gradient có dạng:

background: radial-gradient(position, shape hoặc size, color-stops);

• position nhận các giá trị như top, bottom, center, left, right, hoặc nhận các giá trị cụ thể như 50% 50% là ở tâm, 0% 0% tương đương top left
• shape hoặc size nhận các giá trị như ellipse (mặc định), circle, farthest-corner, closest-side, closest-corner, farthest-side ...
• color-stops điểm dừng màu

<style>
    div.first {
        height: 150px;
        width: 300px;
        color: #FFF;
        background: -webkit-radial-gradient(green, yellow, blue);
    }
    div.second {
        height: 150px;
        width: 300px;
        color: #FFF;
        background: -webkit-radial-gradient(circle, green, yellow, blue);
    }
</style>

<div class="first">Elipse (default)</div>
<div class="second">Circle</div>

Bạn có thể sử dụng phương pháp giông như ở thuộc tính background-position để chỉ ra vị của tâm.

<style>
    div.first1 {
        height: 150px;
        width: 150px;
        color: #FFF;
        background: -webkit-radial-gradient(top left, green, yellow, blue);
    }
    div.second1 {
        height: 150px;
        width: 150px;
        color: #FFF;
        background: -webkit-radial-gradient(green 5%, yellow 15%, blue 60%);
    }
</style>

<div class="first1">top left</div>
<div class="second1">center</div>

Ví dụ về đặt điểm dừng màu

<style>
    div.cstop {
        height: 150px;
        width: 150px;
        color: #FFF;
        background:
         -webkit-radial-gradient(circle, green 40%, yellow 50%, blue 70%);
    }
</style>

<div class="cstop">green 40%, yellow 50%, blue 70%</div>