Cách sử dụng Trình tạo gradient và đổ bóng CSS
- 1
Chọn Gradient hoặc Đổ bóng hộp
Chuyển giữa hai trình chỉnh sửa bằng các tab phía trên bản xem trước.
- 2
Bắt đầu từ mẫu có sẵn
Nhấp một ô trong Mẫu có sẵn để tải, hoặc giữ mặc định rồi chỉnh tiếp.
- 3
Chỉnh trực quan
Kéo điểm màu và đặt Góc, hoặc thêm lớp bóng rồi chỉnh Lệch Y, Độ nhòe và Độ lan.
- 4
Sao chép mã
Sao chép khai báo CSS hoặc class Tailwind rồi dán vào dự án.
Giới hạn và Pro
Miễn phí, không cần đăng ký: không giới hạn điểm màu và lớp bóng, 3 loại gradient, 3 không gian pha màu và 24 mẫu có sẵn.
Pro gỡ quảng cáo; cả hai trình chỉnh sửa đều đầy đủ ở mọi gói. Xem Pro
Về Trình tạo gradient và đổ bóng CSS
Gradient và đổ bóng là hai hiệu ứng CSS thường phải chỉnh mò nhiều lần trong công cụ dành cho nhà phát triển của trình duyệt. Công cụ này cho mỗi hiệu ứng một trình chỉnh sửa trực quan với bản xem trước lớn theo thời gian thực, rồi viết ra đúng khai báo CSS và class Tailwind dạng giá trị tùy ý tương ứng, chẳng hạn bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], để bạn dán thẳng vào stylesheet hoặc className.
Trình chỉnh gradient tạo được gradient tuyến tính, tỏa tròn và hình nón. Nhấp vào thanh điểm màu để thêm màu đúng chỗ vừa nhấp, kéo một điểm để di chuyển hoặc dùng phím mũi tên để đặt vị trí chính xác, và mỗi điểm có độ mờ đục riêng. Gradient tuyến tính và hình nón có góc, gradient tỏa tròn và hình nón có tâm, gradient tỏa tròn chọn được hình tròn hoặc elip, và loại nào cũng có thể lặp lại để tạo sọc và vòng. Bạn cũng chọn được không gian màu dùng để pha màu: OKLab và OKLCH tránh vùng giữa xám đục mà cách pha sRGB truyền thống tạo ra giữa các màu đậm, và được mọi trình duyệt hiện nay hỗ trợ.
Trình chỉnh đổ bóng hộp xếp chồng bao nhiêu lớp tùy ý. Mỗi lớp có độ lệch X và Y, độ nhòe, độ lan, màu kèm độ mờ đục, công tắc bóng trong và nút ẩn/hiện; các lớp sắp xếp lại được, vì lớp đầu tiên được vẽ trên cùng. Hộp xem trước có thể chỉnh kích thước, bo góc và màu, cho thấy hiệu ứng trên nền sáng hoặc tối.
Mỗi trình chỉnh có mười hai mẫu có sẵn – hoàng hôn, bánh xe màu và sọc; độ nổi Material, bóng mềm nhiều lớp, neumorphism và bóng lệch cứng – làm điểm xuất phát. Công cụ chỉ tạo gradient và đổ bóng hộp; text-shadow, filter: drop-shadow và gradient SVG thì không.
Quyền riêng tư
Mọi thứ diễn ra ngay trong trang: màu và cài đặt không rời khỏi trình duyệt, không có ảnh nào được tải lên. Gradient và bóng hiện tại được lưu trong bộ nhớ cục bộ nên vẫn còn khi bạn quay lại.
Tính năng
Tuyến tính, tỏa tròn và hình nón
Điểm màu kéo được kèm độ mờ đục, góc, tâm, hình dạng và chế độ lặp lại.
Đổ bóng nhiều lớp
Xếp chồng, sắp xếp lại, ẩn và đặt bóng trong cho từng lớp để tạo chiều sâu chân thực.
CSS và Tailwind
Sao chép khai báo có sẵn hoặc class Tailwind dạng giá trị tùy ý.