Trình Tạo CSS box-shadow
Bào chế những lớp bóng (box-shadow) ảo diệu bằng giao diện trực quan.
Công cụ miễn phí cân trọn các trò đè lớp bóng (multi-layer) bắt kịp trend thiết kế hiện tại.
Danh sách lớp bóng
Chỉnh thông số bóng
Xem trước
Giới thiệu
Trình Tạo CSS box-shadow là một chiếc xưởng gia công bóng đổ thu nhỏ, giúp bạn dễ dàng bóp méo thuộc tính box-shadow qua một giao diện kéo thả trực quan.
Bạn không chỉ xào nấu được mấy cái bóng mờ đơn giản, mà còn có thể mix nhiều lớp bóng đè lên nhau để tạo ra các xu hướng thiết kế sang xịn như Neumorphism (dập nổi 3D), Neo Brutalism (phẳng lì cứng cáp) hay Glassmorphism (hiệu ứng kính) chỉ bằng cách chấm mút vào thư viện mẫu.
Sau khi vọc vạch xong, công cụ đẻ ra sẵn mã CSS thường, mã chứa biến CSS, hay cả đống class Tailwind lằng nhằng (hỗ trợ arbitrary values) để bạn copy mang về dùng luôn cho tiện.
Cách dùng
Nghía qua dàn mẫu ở trên cùng, thấy cái nào hao hao giống ý tưởng của mình thì bấm chọn để tiết kiệm thời gian. Dĩ nhiên bạn cũng có thể tự kỉ xây từ đầu bằng nút "Thêm lớp".
Mân mê các thanh trượt Lệch X/Y để xê dịch vị trí, vặn độ mờ (blur), độ phình (spread) và rắc thêm chút màu sắc. Mẹo nhỏ: đè 2-3 lớp bóng lên nhau nhìn sẽ "real" và có chiều sâu hơn đấy.
Khi cục BOX ở màn hình xem trước đã lung linh đúng ý, nhìn xuống bảng đen góc dưới bên phải, chọn loại code bạn thích (CSS hay Tailwind) rồi ấn cái rụp vào nút copy.
Thuộc tính
Cú pháp giải phẫu thuộc tính box-shadow
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
- offset-x / offset-y
- Xác định bóng chạy đi đâu. Giá trị dương đẩy bóng sang phải/xuống dưới. Giá trị âm kéo nó sang trái/lên trên.
- blur-radius (Độ nhòe)
- Bóng càng nhòe thì trông càng mềm và lan rộng. Nếu set về 0, cái bóng sẽ sắc lẹm cục súc y hệt phong cách Neo Brutalism.
- spread-radius (Độ lan)
- Bơm phồng hoặc hút xẹp cái bóng. Số dương làm bóng mập hơn vật thể thật, số âm thu nhỏ cái bóng lại nằm thọt lỏn ở dưới.
- inset (Bóng đổ trong)
- Gắn từ khóa này vào thì cái bóng lật ngược vào trong ruột phần tử, tạo cảm giác thẻ HTML bị lõm, lún sụt xuống so với mặt phẳng.
FAQ
Q. Việc dùng box-shadow có làm chậm web không?
Q. box-shadow khác gì với filter: drop-shadow?
Q. Thuộc tính inset thường được xài khi nào?
Q. Tại sao lại phải đè nhiều lớp bóng lên nhau làm gì?
Ứng dụng
Giao diện Thẻ (Card) và Modal
Bê phần nội dung tách hẳn khỏi mặt nền, đập vào mắt người dùng rằng đây là một khối độc lập quan trọng.
Trạng thái Nhấn/Di chuột của Nút
Làm cái bóng phình ra lúc di chuột vào, rồi lật mặt thành bóng chìm (`inset`) lúc bấm, tạo cảm giác nhấn nút bấm vật lý lạch cạch rất sướng.
Phong cách Neumorphism
Ghép một bóng trắng đánh chéo với một bóng đen mờ trên bề mặt cùng màu nền, bạn sẽ đúc ra được mấy khối dập nổi 3D sang chảnh.
Hiệu ứng tỏa sáng (Glow)
Đưa lệch X, lệch Y về 0 rồi bơm căng spread lên với mấy gam màu dạ quang, cục hộp của bạn trông như đang tự phát sáng chói lóa.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.