Trong bài viết này, FUNiX sẽ giới thiệu các ví dụ về gradient nền khác nhau để tạo cảm hứng cho thiết kế CSS tiếp theo của bạn.

1. Tạo màu nền gradient bằng CSS

CSS gradient là sự chuyển đổi mượt mà giữa hai hoặc nhiều màu sắc khác nhau. CSS gradient cung cấp khả năng kiểm soát và hiệu quả tốt hơn so với việc sử dụng tệp hình ảnh màu gradient thực tế (mà bạn có thể tạo ra với một công cụ như Adobe Illustrator). Thuộc  tính CSS background-image được dùng để khai báo các gradient làm nền.

Có ba loại gradient: linear (được tạo bằng hàm linear-gradient()), radial (được tạo bằng hàm radial-gradient()) và conic (được tạo bằng hàm conic-gradient()). Ngoài ra, bạn có thể tạo các gradient lặp lại với các hàm repeating-linear-gradient(), repeating-radial-gradient() và repeating-conic-gradient()

MDN Docs định nghĩa các hàm này như sau:

• linear-gradient(): tạo ra một hình ảnh có sự chuyển đổi liên tục giữa hai hoặc nhiều màu dọc theo một đường thẳng (tuyến tính). Kết quả của nó là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt.
• radial-gradient(): tạo ra một hình ảnh bao gồm sự chuyển đổi liên tục giữa hai hoặc nhiều màu sắc tỏa ra từ một điểm gốc. Kết quả của hàm là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt.
• conic-gradient(): tạo ra một hình ảnh bao gồm một gradient với các chuyển đổi màu xoay quanh một điểm trung tâm (thay vì tỏa ra từ trung tâm). Ví dụ về conic gradient  bao gồm biểu đồ hình tròn và bánh xe màu. Kết quả của hàm conic-gradient() là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt.
• repeat-linear-gradient(): tạo ra một hình ảnh bao gồm các gradient tuyến tính lặp lại. Nó cũng tương tự như gradient/linear-gradient() và lấy các đối số giống nhau, nhưng nó lặp lại color-stop vô hạn theo mọi hướng để bao phủ toàn bộ container của nó. Kết quả của hàm là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt .
• repeat-radial-gradient(): tạo ra một hình ảnh bao gồm các gradient lặp lại tỏa ra từ một điểm gốc. Nó tương tự như gradient / radial-gradient () và lấy các đối số giống nhau, nhưng nó lặp lại color-stop vô hạn theo mọi hướng để bao phủ toàn bộ container của nó, tương tự như gradient/repeat-linear-gradient (). Kết quả của hàm là một đối tượng của kiểu dữ liệu <gradient>, một loại <image> đặc biệt .
• repeat-conic-gradient(): tạo ra một hình ảnh bao gồm một gradient lặp lại (thay vì một gradient đơn lẻ) với các chuyển đổi màu được xoay quanh một điểm trung tâm (thay vì tỏa ra từ trung tâm).

Dưới đây là cú pháp chính thức của từng loại gradient.

>> Đọc ngay: Hướng dẫn cơ bản về CSS cho người mới bắt đầu

linear-gradient(
 [ <angle> | to <side-or-corner> ]? ,
 <color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]

Cú pháp chính thức của Radial Gradient

radial-gradient(
 [ <ending-shape> || <size> ]? [ at <position> ]? ,
 <color-stop-list>
);

Cú pháp chính thức của Conic Gradients 

conic-gradient(
 [ from <angle> ]? [ at <position> ]?,
 <angular-color-stop-list>
)

Dưới đây là một số ví dụ màu nền gradient tuyệt vời có thể nâng tầm giao diện người dùng trang web của bạn lên cấp độ mới. 

3. Cỏ bụi

 

CSS để tạo gradient ở trên:

background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

4. Màu cát sang xanh lam

 

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #DECBA4, #3E5151);

5. Amin

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #8e2de2, #4a00e0);

5. Màu đỏ thư giãn

 

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #fffbd5, #b20a2c);

6. Ánh sáng siêu phàm

 

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #fc5c7d, #6a82fb);

7. Megatron

 

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);

8. Mâm xôi xanh

 

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #00b4db, #0083b0);

>>> Đọc ngay:3 phương pháp căn giữa hình ảnh với CSS dễ dàng

9. Sự căng thẳng

 

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #870000, #190a05);

10. Xoài vàng

 

CSS để tạo gradient ở trên:

background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);

11. Cá diêu hồng

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));

12. Chúa tể biển cả

 

CSS để tạo gradient ở trên:

background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );

13. Hoa anh đào

 

CSS để tạo gradient ở trên:

background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);

14. Không khí trong lành

CSS để tạo gradient ở trên:

background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );

15. Kye Meh

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #8360c3, #2ebf91);

>>> Xem thêm: Cách sử dụng CSS text-shadow: 11 Thủ thuật và Ví dụ

16. Bóng tối

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #434343 0%, black 100%);

17. Kết tinh

CSS để tạo gradient ở trên:

background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);

18. Lawrenci

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);

19. Ohhappiness

CSS để tạo gradient ở trên:

background-image: linear-gradient(to right, #00b09b, #96c93d);

20. Cỏ 

CSS để tạo gradient ở trên:

background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );

Lưu ý: Code được sử dụng trong bài viết này là MIT Licensed.

21. Làm đẹp trang web của bạn với Gradients

Bạn có thể sử dụng gradient với một số element của trang web như nền, đường viền, biểu tượng, nút, văn bản, gạch dưới, dấu đầu dòng danh sách, v.v. Nâng thiết kế trang web của bạn lên một tầm cao mới với gradient!

>>> Nếu bạn đang có nhu cầu tìm hiểu về khóa học lập trình đi làm ngay. Hãy liên hệ với FUNiX ngay tại đây:

>>> Xem thêm chuỗi bài viết liên quan:

10 ví dụ mã CSS mà bạn có thể học trong 10 phút

Cách tạo Mẫu F và Z bằng HTML và CSS

8 mẹo và thủ thuật CSS mọi lập trình viên nên biết

10 mẫu nền CSS bạn có thể sử dụng trên trang web của mình

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/css-background-gradients/