30 Ví dụ về Gradient Nền CSS Phong cách
Luôn cập nhật các xu hướng và tiêu chuẩn thiết kế web hàng đầu là rất quan trọng đối với một nhà thiết kế hoặc một nhà phát triển. Hiện nay, gradient nền được sử dụng rộng rãi trong các trang web hiện đại.
Sử dụng các ví dụ về gradient nền này làm nguồn cảm hứng cho thiết kế CSS tiếp theo của bạn.
Mục Lục
Sinh viên nền tảng sử dụng CSS
CSS gradient hiển thị một quá trình chuyển đổi mượt mà bằng cách sử dụng hai hoặc nhiều màu được chỉ định. CSS gradient cung cấp khả năng kiểm soát và hiệu suất tốt hơn so với việc sử dụng tệp hình ảnh thực tế của gradient mà bạn có thể tạo bằng các công cụ như Adobe Illustrator. Sử dụng hình nền Thuộc tính CSS để khai báo gradient làm nền.
Có ba loại gradient: tuyến tính (được tạo bằng gradient tuyến tính () hàm số), xuyên tâm (được tạo nên bởi radial-gradient () chức năng), và conic (được tạo bằng conic-gradient () hàm số). Bạn cũng có thể tạo các gradient lặp lại với lặp lại-tuyến tính-gradient (), repeat-radial-gradient ()và lặp lại-conic-gradient () chức năng.
MDN Docs định nghĩa các chức năng này là:
tuyến tính-gradient (): Hàm CSS tuyến tính-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 dọc theo một đường thẳng. Kết quả của nó là một đối tượng của
radial-gradient (): radial-gradient () Hàm CSS tạo ra một hình ảnh bao gồm một quá trình 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. Hình dạng của nó có thể là hình tròn hoặc hình elip. Kết quả của hàm là một đối tượng của
conic-gradient (): conic-gradient () Hàm CSS tạo ra một hình ảnh bao gồm một gradient 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). Ví dụ về gradient conic bao gồm biểu đồ hình tròn và bánh xe màu. Kết quả của conic-gradient () hàm là một đối tượng của
lặp lại-tuyến tính-gradient (): lặp lại-tuyến tính-gradient () Hàm CSS tạo ra một hình ảnh bao gồm các gradient tuyến tính lặp lại. Nó tương tự như gradient / linear-gradient () và lấy các đối số giống nhau, nhưng nó lặp lại màu sắc dừng lại vô hạn theo mọi hướng để bao phủ toàn bộ vùng chứa của nó. Kết quả của hàm là một đối tượng của
repeat-radial-gradient (): repeat-radial-gradient () Hàm CSS 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 màu sắc dừng lại vô hạn theo mọi hướng để bao phủ toàn bộ vùng chứa 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
repeat-conic-gradient (): lặp lại-conic-gradient () Hàm CSS 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).
Đây là cú pháp chính thức của từng loại gradient.
Cú pháp chính thức của Gradients tuyến tính
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 Gradients Radial
radial-gradient(
[ <ending-shape> || <size> ]? [ at <position> ]? ,
<color-stop-list>
);Cú pháp chính thức của Gradients Conic
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)Dưới đây là một số ví dụ về gradient nền tuyệt vời có thể nâng cao giao diện người dùng của trang web của bạn lên cấp độ tiếp theo.
1. Cỏ bụi
Sử dụng CSS sau để tạo gradient ở trên:
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);2. Cát sang xanh lam
Để tạo gradient được hiển thị ở trên, hãy sử dụng mã CSS sau:
background-image: linear-gradient(to right, #DECBA4, #3E5151);3. Kye Meh
Sử dụng mã CSS sau để tạo nền gradient tuyến tính ở trên:
background-image: linear-gradient(to right, #8360c3, #2ebf91);4. Amin
Sử dụng CSS sau để tạo gradient ở trên:
background-image: linear-gradient(to right, #8e2de2, #4a00e0);5. Màu đỏ thư giãn
Chỉ với một dòng mã CSS, bạn có thể thêm gradient nền đẹp, bắt mắt vào trang web của mình:
background-image: linear-gradient(to right, #fffbd5, #b20a2c);6. Ánh sáng siêu phàm
Hãy thử sử dụng CSS này để tạo nền gradient. Nó dễ sử dụng và sẽ tạo thêm phong cách cho trang web của bạn:
background-image: linear-gradient(to right, #fc5c7d, #6a82fb);7. Megatron
Sử dụng CSS sau để tạo gradient 3 màu:
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);8. Blue Raspberry
Sử dụng CSS sau để tạo một nền gradient tuyến tính màu xanh lam đơn giản:
background-image: linear-gradient(to right, #00b4db, #0083b0);9. Tối cao cấp
Nhận giao diện gradient được hiển thị ở trên với mã CSS gradient tuyến tính này:
background-image: linear-gradient(to right, 10. Tinh thể
Sử dụng CSS sau để tạo gradient ở trên:
background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);11. Lawrencium
Sử dụng CSS sau để tạo gradient ở trên. Bạn cũng có thể sử dụng mã này để tạo các gradient khác với các màu khác nhau.
background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);12. Ôi hạnh phúc
Thêm phong cách cho trang web của bạn với nền gradient CSS dễ sử dụng này:
background-image: linear-gradient(to right, #00b09b, #96c93d);13. Sự căng thẳng
Bạn đang tìm cách thêm một số món ăn hấp dẫn vào trang web của mình? Hãy thử sử dụng CSS này để tạo nền gradient:
background-image: linear-gradient(to right, #870000, #190a05);14. Xoài vàng
Sử dụng CSS sau để tạo nền gradient xuyên tâm ở trên:
background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);15. Cỏ ngon
Chuyển đổi các phần tử HTML của bạn trong tích tắc với mã CSS này:
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% );16. Cá hồng
Sử dụng CSS sau để tạo nền gradient tuyến tính ở trên:
background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));17. Chúa tể biển cả
Sử dụng CSS sau để 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% );18. Hoa anh đào
Mã CSS này sẽ tạo ra một gradient màu anh đào. Bạn cũng có thể sử dụng nó để tạo các gradient khác với các màu khác nhau:
background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);19. Không khí trong lành
Để tạo gradient được hiển thị ở trên, hãy sử dụng mã CSS sau:
background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );