Preview
CSS được tạo
Điều khiển gradient
Cài đặt trước phổ biến
Ví dụ về gradient
Khám phá những ví dụ về gradient tuyệt đẹp này và lấy cảm hứng cho dự án tiếp theo của bạn. Nhấp vào bất kỳ gradient nào để tải nó vào máy tạo.
Má hồng hoàng hôn
Một gradient ấm áp lấy cảm hứng từ cảnh hoàng hôn tuyệt đẹp.
Gió biển
Một độ dốc yên tĩnh gợi lên cảm giác của vùng nước ven biển.
Bạc hà kết hợp
Một gradient tươi mới và hiện đại kết hợp bạc hà và xanh da trời.
Khu vườn tươi tốt
Một gradient rực rỡ đại diện cho vẻ đẹp của thiên nhiên.
Giấc mơ vũ trụ
Một gradient kỳ diệu lấy cảm hứng từ bầu trời đêm.
Giờ vàng
Một gradient ấm áp nắm bắt được bản chất của chạng vạng.
Tài liệu Gradient
CSS Gradients là gì?
Gradient CSS cho phép bạn hiển thị chuyển tiếp mượt mà giữa hai hoặc nhiều màu. Chúng có thể được sử dụng làm nền cho các phần tử và có ba loại khác nhau:
- Gradient tuyến tính:Chuyển màu dọc theo một đường thẳng.
- Độ dốc xuyên tâm:Chuyển màu từ điểm trung tâm ra ngoài.
- Độ dốc hình nón:Màu chuyển tiếp xung quanh một điểm trung tâm trong một vòng tròn.
Cách sử dụng gradient
Khi bạn đã tạo gradient bằng công cụ của chúng tôi, bạn có thể sử dụng mã CSS trong các dự án của mình:
- Sao chép mã CSS từ trình tạo.
- Dán nó vào tệp CSS của bạn hoặc sử dụng nó nội tuyến trong các phần tử HTML của bạn.
- Áp dụng gradient cho bất kỳ phần tử nào bằng cách sử dụng
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Sử dụng nhiều hơn hai màu để có hiệu ứng gradient phức tạp hơn.
- Điều chỉnh vị trí màu để kiểm soát vị trí chuyển đổi xảy ra.
- Kết hợp nhiều gradient để có hiệu ứng sáng tạo hơn nữa.
- Đối với gradient hình nón, thay đổi tâm tạo ra các mẫu thú vị.
- Lưu các gradient yêu thích của bạn để sử dụng sau này.
Hỗ trợ trình duyệt
Gradient CSS được hỗ trợ rộng rãi trong các trình duyệt hiện đại. Tuy nhiên, các trình duyệt cũ hơn như Internet Explorer có thể không hiển thị chúng một cách chính xác. Luôn cung cấp màu dự phòng:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
Giới thiệu về công cụ này
Trình tạo gradient CSS của chúng tôi được thiết kế để giúp các nhà phát triển và nhà thiết kế tạo gradient đẹp một cách dễ dàng. Cho dù bạn đang làm việc trên một trang web, ứng dụng hay chỉ muốn thử nghiệm với màu sắc, công cụ này giúp bạn dễ dàng tạo gradient hoàn hảo cho dự án của mình.
Features
Dễ sử dụng
Giao diện trực quan để tạo gradient.
Thiết kế đáp ứng
Hoạt động hoàn hảo trên mọi kích thước màn hình.
Sao chép-dán sẵn sàng
Nhận mã CSS sạch ngay lập tức.
Cài đặt trước có sẵn
Bắt đầu với các gradient đẹp được xác định trước.
Related Tools
Trình làm đẹp CSS
Định dạng và làm đẹp mã CSS của bạn với độ chính xác chuyên nghiệp
Tạo gradient CSS đẹp dễ dàng
Tạo gradient tuyến tính, xuyên tâm và hình nón tuyệt đẹp với giao diện trực quan của chúng tôi. Sao chép mã CSS và sử dụng nó trong các dự án của bạn ngay lập tức.
Công cụ chuyển đổi ít sang CSS
Chuyển đổi mã Less của bạn thành CSS. Nhanh chóng, dễ dàng và an toàn.
Máy tính tuổi
Tính toán tuổi chính xác của bạn theo năm, tháng và ngày bằng máy tính tuổi chính xác của chúng tôi.
Số thập phân thành văn bản
Chuyển đổi biểu diễn thập phân thành văn bản một cách dễ dàng
Máy tính phần trăm
Dễ dàng tính toán tỷ lệ phần trăm với máy tính tỷ lệ phần trăm trực quan của chúng tôi.