Tổng hợp mẫu CSS Background Gradient đẹp nhất

Màu đơn là xu hướng của năm ngoái. Hiện tại Gradient đang “lên ngôi”! Thế nhưng bạn đã biết cách tạo background gradient trong CSS chưa?

Luôn cập nhật xu hướng thiết kế web hàng đầu và các tiêu chuẩn rất quan trọng đối với một nhà thiết kế web hoặc lập trình viên. Hiện tại, background gradient được dùng phổ biến ở các trang web hiện đại. Những mẫu background gradient dưới đây sẽ gợi ý cho bạn thiết kế CSS thú vị hơn.

Gradient background bằng CSS

Một gradient CSS hiện chuyển tiếp mượt mà bằng cách dùng 2 hoặc nhiều màu sắc được chỉ định. Gradient CSS mang tới quyền kiểm soát và hiệu suất tốt hơn việc dùng file ảnh của một gradient mà bạn có thể tạo bằng những công cụ như Adobe Illustrator. Dùng thuộc tính background-image CSS để khai báo gradient làm background.

Hiện có 3 kiểu gradient: linear (được tạo bằng hàm linear-gradient()), radial (tạo bằng radial-gradient()) và conic (được tạo bằng conic-gradient()). Bạn cũng có thể tạo gradient lặp lại bằng repeating-linear-gradient(), repeating-radial-gradient(), và repeating-conic-gradient().

MDN Docs xác định những hàm trên như sau:

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

Sau đây là cú pháp chính thức của từng kiểu gradient:

Cú pháp của linear gradient

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

Cú pháp của Radial Gradient

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

Cú pháp của Conic Gradient

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

Sau đây là một số mẫu background gradient tuyệt vời, được tạo bằng thuộc tính CSS background-image, có thể nâng cao UI của web lên tầm cao mới.

Mẫu background gradient đẹp trong CSS

Dusty Grass

Dùng CSS sau để tạo gradient trên:

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

Sand to Blue

Để tạo gradient trên, dùng code CSS sau:

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

Kye Meh

Dùng code CSS sau để tạo linear gradient background trên:

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

Amin

CSS:

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

Relaxing Red

Chỉ bằng một dòng code CSS, bạn có thể thêm background gradient đẹp, bắt mắt cho web:

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

Sublime Light

Thử dùng CSS này để tạo một gradient background. Thật dễ dùng và thêm một chút phong cách cho trang của bạn:

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

Megatron

Dùng CSS sau để tạo gradient 3 màu:

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

Blue Raspberry

Dùng CSS sau để tạo một linear gradient background hơi xanh đơn giản:

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

Premium Dark

Code CSS:

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

Crystalline

Code CSS:

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

Lawrencium

Dùng CSS sau để tạo gradient trên. Bạn cũng có thể dùng code này để tạo gradient với màu sắc khác:

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

Ohhappiness

Code CSS:

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

The Strain

Code CSS:

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

Yellow Mango

Code CSS tạo radial gradient background:

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

Juicy Grass

Code CSS:

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% );

Bạn có thể dùng gradient trên với một số nhân tố khác cho trang web như background, border, icon, button, text, underlining, list bullet… để đưa thiết kế web lên tầm cao mới. Hi vọng bài viết có mẫu phù hợp với bạn.