Tạo ra Linear Gradient với CSS

Linear Gradient - Hàm linear-gradient

Trong CSS cho phép bạn tạo ra các đối tượng hình ảnh, hiện thị biến đổi liên tục giữa hai hoặc nhiều màu. CSS có hai kiểu chuyển đổi màu Linear và Radial

Vì là tạo ra đối tượng xếp vào loại image, nên có thể thiết lập nó là giá trị cho các thuộc tính cần dùng đến image như: background-image, list-style-image, border-image, cursor, content trong ::after và ::before

Tạo ra linear gradient bạn phải định nghĩa tối thiểu điểm dừng màu. Điểm dừng màu là màu nằm giữa khoảng màu cần biến đổi liên tục. Bạn cũng cần thiết lập một điểm bắt đầu và hướng hoặc góc qua đó màu biến đổi.

Cú pháp:

linear-gradient(angle/direction, color1, color2, ...)

• angle : góc đổ màu, có thể nhập giá trị độ như 0deg (hướng từ dưới lên), 45deg, 90deg (trái sang phải) ...

• direction : hướng đổ màu (nếu không dùng góc thì bạn dùng hướng), đầu tiên các cạnh của hình hộp là top, left, right, bottom, bạn có thể xác định hướng là đứng từ tâm hình nhìn về các cạnh bằng cách viết thêm từ khóa to như to top (hướng lên ~ 0 độ), to right (hướng sang phải ~ 90 độ) ...

  Hoặc hướng xác định bằng cách từ tâm nhìn về các góc, như to top left (315 độ), to top right (45 độ) ...

  color1, color2 ... các giá trị màu như reg, green ... Ngoài chỉ ra màu - theo sau mỗi màu bạn có thể chỉ rõ điểm dừng màu bằng đơn vị dài (px, em, % ...) ví dụ red 50px, green 100px (cách 50px là màu red, cách 100px là màu green) ...

Một số ví dụ minh họa Linear Gradient

Ví dụ sau, màu xanh và trắng tạo ra gradient biến đổi từ trên xuống dưới.

<style>
    .ele {
        width: 300px;
        height: 100px;
        margin: 4px;
        color: #FFF;
        display: inline-block;
        text-align: center;
    }
    
    .gr-default {
        background-image: linear-gradient(red, blue);             / * Hướng mặc định trên xuống dưới */
    }
    .g-30deg {
        background-image: linear-gradient(30deg, red, blue);       / * Hướng mặc định trên xuống dưới */
    }
    .gr-90deg {
        background-image: linear-gradient(90deg, red, blue);   
    }
    .gr-to-top {
        background-image: linear-gradient(to top, red, blue);       / *Hướng lên */
    }
    .gr-to-top-right {
        background-image: linear-gradient(to top right, red, blue); / *Hướng góc trên phải */
    }
</style>

<div class="ele gr-default">
    Đỏ -> Xanh: Hướng trên xuống
</div> 
<div class="ele g-30deg">
    Đỏ -> Xanh: Hướng trên xuống
</div> 
<div class="ele gr-90deg">
    Đỏ -> Xanh: Hướng 90 độ
</div>  
<div class="ele gr-to-top">
    Đỏ -> Xanh: Hướng (to top)
</div>  
<div class="ele gr-to-top-right">
    Đỏ -> Xanh: hướng góc top right
</div>  

Có thể thêm nhiều điểm màu, mỗi màu cách nhau bởi dấu phảy ,

<style>
    .ele {
        width: 300px;
        height: 100px;
        margin: 4px;
        color: #FFF;
        display: inline-block;
        text-align: center;
    }
    
    .gr-ex1 {
        background-image: linear-gradient(blue, red, yellow, pink, black);
    }
</style>

<div class="ele gr-ex1">
 blue, red, yellow, pink, black
</div>

Các điểm dừng màu có thể chỉ ra không đều cho từng màu. Khoảng cách tính từ gốc của hướng (theo phần trăm, px, em)

<style>
    .ele {
        width: 300px;
        height: 100px;
        margin: 4px;
        color: #FFF;
        display: inline-block;
        text-align: center;
    }
    
    .gr-ex2 {
        background-image: linear-gradient(blue 0%, yellow 50%, green 100%);
    }
</style>

<div class="ele gr-ex2">
 blue 0%, yellow 50%, green 100%
</div>

Hàm repeating-linear-gradient

Hàm này cú pháp tương tự như linear-gradient, nó cố gắng lặp lại nhiều lần hàm linear-gradient

<style> 
    .gr-repeat {
        background-image: repeating-linear-gradient(to right, red 0px, blue 40px, red 80px); 
    }
</style>

<div class="ele gr-repeat">
    Lặp lại
</div>