Biến text, border, icon thành gradient với CSS

Nếu bạn đang thấy màu text, màu boder hay màu icon đơn màu quá nhàm chán, bạn cũng có thể gặp khó gặp khi css chúng thàng gradient thì trong bài bài viết này mình sẽ đề cập đến việc làm sao biến chúng thành gradient và mình sẽ hướng dẫn cụ thể cho các bạn.

Chắc các bạn cũng đã thử css cho chúng như thế này: color: linear-gradient(to right, red, organe) đúng không nhưng thật tiếc là không được đơn vì css không hỗ trợ chúng ta làm nhưng cách đó. Bây giờ cùng mình đi vào các chi tiết cụ thể.

Text gradient

Để đổi được màu chữ thành gradient thì bên HTML các bạn cần tạo một đoạn text, heading, title. Ở đây mình sẽ tạo một đoạn title có class “heading” với nội dung là “Blog Ánh Văn Hóa”.

<h1 class="heading">Blog Ánh Văn Hóa</h1>

Sau khi đã viết xong HTML thì sẽ css cho nó, mình sẽ trỏ đến tiêu đề đó bằng class ở đây mình sẽ set cho nó một cái background linear-gradient để pha 2 màu vào với nhau, tiếp theo mình sẽ set màu chữ thành trong suốt với thuộc tình là color: transparent; bây giờ mình sẽ viết cho nó thuộc tính cuối cùng để hoàn thiện đoạn code của mình, đó là -webkit-background-clip: text; thuộc tình này có nghĩ là cắt chữ theo màu nền. Chỉ với vài dòng code bạn có thể thay đổi màu chữ cực đẹp.

.heading {
    background-image: linear-gradient(
        to right top,
        #d16ba5,
        #c777b9,
        #ba83ca,
        #aa8fd8,
        #9a9ae1,
        #8aa7ec,
        #79b3f4,
        #69bff8,
        #52cffe,
        #41dfff,
        #46eefa,
        #5ffbf1
    );
    color: transparent;
    -webkit-background-clip: text;
    font-size: 70px;
}

Và đây là kết quả cho vài dòng code trên.

Icon gradient

Để làm được icon gradient sẽ phức tạp hơn so với chữ bên HTML các bạn cần tạo một biểu tương mà bạn muốn sử dụng thẻ <svg> nhưng hầu hết chúng ta sẽ đi copy các biểu tượng này, để copy được các biểu tượng này các bạn hay truy cập đến trang: fontawesome, iconify.design, icon google, các bạn hay copy phần svg hoặc tải nó về nha.

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <linearGradient id="my-gradient" x2="0.05" y2="1">
        <stop offset="5%" stop-color="#FF6867" />
        <stop offset="50%" stop-color="#A233FA" />
        <stop offset="100%" stop-color="#0794FF" />
    </linearGradient>
    <path
        fill="currentColor"
        d="M12 2a9.65 9.65 0 0 0-10 9.7a9.51 9.51 0 0 0 3.14 7.18a.81.81 0 0 1 .27.56v1.78a.81.81 0 0 0 1.13.71l2-.87a.75.75 0 0 1 .53 0a11 11 0 0 0 2.9.38A9.7 9.7 0 1 0 12 2m6 7.46l-2.93 4.66a1.5 1.5 0 0 1-2.17.4l-2.34-1.75a.6.6 0 0 0-.72 0l-3.16 2.4a.47.47 0 0 1-.68-.63l2.93-4.66a1.5 1.5 0 0 1 2.17-.4l2.34 1.75a.6.6 0 0 0 .72 0l3.16-2.4a.47.47 0 0 1 .68.63"
    />
</svg>

Thẻ <linearGradient> sẽ định nghĩa các dải màu trong svg đặt id my-gradient để tì mính sẽ trỏ đến nó, trong thẻ <linearGradient> mình sẽ viết thêm thẻ <stop> với 2 attribute là offset và stop-color, với thuộc tính offset các bạn sẽ đưa giái trị là phần trăm vô đây, có nghĩ nó sẽ đi với quang đường là ban nhiêu, thuộc tính stop-color là các bạn sẽ định nghĩa màu mà các bạn muốn dải lên icon.

Để hoàn thiện việc chải màu vào icon các bạn có thể thêm trực tiếp vào thẻ svg với thuộc tính như sau.

<svg
    class="icon-gradient"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="url(#my-gradient)"
></svg>

Bạn cũng có thể thử với các còn lại là dùng file css như này.

.icon-gradient {
    fill: url(#my-gradient);
}

Và đây là kết quả:

Border gradient

Trước tiên mình muốn nói với các bạn là phần này mình có tham khảo của anh evondev rồi mình viết bài này chia sẻ cho các bạn nếu các, còn bạn nào muốn xem video gốc mình sẽ để nó tại đây.

Sử dụng các thuộc tính border-image-slice và border-image-source.

Tại file HTML các bạn hãy tạo cho mình một các một thẻ div với class là box như sau:

<div class="box"></div>

Bây giờ cùng mình css để tạo một border gradient, trước tiên mình sẽ định nghĩa chiều dài, chiều rộng cho nó, và mình cũng sẽ thêm background luôn cho việc quan sát.

.box {
    width: 300px;
    height: 500px;
    background-color: #0d1b29;
}

Đến phần quan trong mình sẽ định nghĩa cho nó một độ rộng và kiểu của border, ở đây mình sẽ cho nó kiểu solid và độ rộng là 10px, tiếp theo mình sẽ thêm thuộc tính là border-image-sllice và border-image-source.

.box {
    border: 10px solid;
    border-image-slice: 40%;
    border-image-source: linear-gradient(
        to right top,
        #d16ba5,
        #c777b9,
        #ba83ca,
        #aa8fd8,
        #9a9ae1,
        #8aa7ec,
        #79b3f4,
        #69bff8,
        #52cffe,
        #41dfff,
        #46eefa,
        #5ffbf1
    );
}

Đây là thành kết quả đạt được.

Thêm thẻ con vào trong.

Với đoạn HTML bên trên mình sẽ thêm vô một thẻ div với class là “box-children”.

<div class="box">
    <div class="box-children"></div>
</div>

Còn bên css trước tiên mình cũng set độ dài và rộng cho một cái box này, thêm vô đó làm một background gradient, ở các này mình thêm cho nó thuộc tính border-radius bởi nó sẽ nhận, một thuộc tính cuối là padding để thêm khảng đệm.

.box {
    width: 300px;
    height: 500px;
    background-image: linear-gradient(
        to right top,
        #d16ba5,
        #c777b9,
        #ba83ca,
        #aa8fd8,
        #9a9ae1,
        #8aa7ec,
        #79b3f4,
        #69bff8,
        #52cffe,
        #41dfff,
        #46eefa,
        #5ffbf1
    );
    border-radius: 10px;
    padding: 10px;
}

Với thẻ div con thì mình cũng sẽ cho nó chiều dài và rộng những nó được kết thừa từ thẻ cha của nó, và border-radius minh cũng kết thừa từ thẻ cha, mình cũng thêm cho nó background khác để dễ quan sát.

.box-children {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: #0d1b29;
}

Và đây là kết quả :

Nhược điểm của cái này là mình phải thêm thẻ cho nó. Vậy nên mình sẽ hướng dẫn cách bạn một cách không cần thêm thẻ mà vẫn ra được một kết quả tương tự.

Sử dụng pseudo ::before hoặc ::after

Bên HTML các bạn chỉ cần một thẻ div với class là box thôi.

<div class="box"></div>

Bên css các bạn cũng cần định nghĩa cho nó chiều dài và chiều rộng, thuộc tính position để chỉ định vị trí cho phần tử, background-clip: pading-box background sẽ không chiến phần border, mình sẽ cho độ rộng của border là 10px kiểu là solid màu là trong suốt, border-radius là 15px, background là #1a1b1b

.box {
    width: 300px;
    height: 500px;
    position: relative;
    background-clip: padding-box;
    border: 10px solid transparent;
    border-radius: 15px;
    background-color: #1a1b1b;
}

Phần css mình dùng pseudo ::after với content rỗng, position: absolute để phần tử con chỉ không vượt qua phần tử cha của nó, để phần tử con chiếm hết phần tử cha mình sẽ cho nó các thuộc tính top, left, bottom, right, để phần tử này nằm phía dưới mình sẽ đùn z-index: 1; border-radius là 10px, margin: -10px nếu các bạn thắc mắc tại sao mình cho bằng -10px thì do phần after nó cũng không chiếm phần border vì thế mình mới -10px để hở ra phần border, cuối cùng là phần background gradient là xong.

.box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    margin: -10px;
    border-radius: 10px;
    background-image: linear-gradient(
        to right top,
        #d16ba5,
        #c777b9,
        #ba83ca,
        #aa8fd8,
        #9a9ae1,
        #8aa7ec,
        #79b3f4,
        #69bff8,
        #52cffe,
        #41dfff,
        #46eefa,
        #5ffbf1
    );
}

Và đây là kết quả:

Phần Kết

Đây những các biến text, border, icon thành màu gradient mà mình biết, các bạn có thể thực hành ngay sau khi đọc xong bài blog này, để có cái trực quan nhất về vấn đền này.

Chúc các bạn thành công.