Tạo Box Shadow Kèm Xem Trước Trực Tiếp
Công cụ tạo box shadow này giúp bạn thiết kế bất kỳ box-shadow CSS nào một cách trực quan, không cần thuộc lòng cú pháp. Kéo các thanh trượt offset, blur, spread và độ mờ, rồi xem khung xem trước cập nhật tức thì trong khi code được tạo luôn sẵn sàng để sao chép.
Công cụ dành cho lập trình viên front-end và nhà thiết kế muốn có một bóng đổ đẹp thật nhanh. Xếp tối đa 10 lớp bóng độc lập để tạo chiều sâu chân thực, bắt đầu từ 9 mẫu có sẵn như Elevated, Neumorph hay Material, rồi tinh chỉnh màu, độ mờ và inset của từng lớp đến khi vừa ý.
Cách Dùng Công Cụ Tạo Box Shadow
Chỉnh các thông số bóng
Đặt Offset X và Offset Y để dịch bóng theo chiều ngang và dọc, rồi dùng Blur để làm mềm viền và Spread để mở rộng hoặc thu nhỏ bóng. Kéo thanh trượt hoặc gõ giá trị chính xác vào ô số bên cạnh.
Đặt màu, độ mờ và inset
Chọn Màu cho bóng và trượt độ mờ từ 0 đến 100%. Bật công tắc Inset để biến bóng ngoài thành bóng trong, tạo hiệu ứng bị nhấn xuống hoặc lõm vào.
Xếp lớp hoặc áp dụng mẫu
Dùng Thêm lớp để xếp tối đa 10 bóng, chọn một lớp bất kỳ để chỉnh, và bấm biểu tượng con mắt để ẩn một lớp trong lúc so sánh. Hoặc bấm một mẫu như Soft hay Material để nạp sẵn một bộ lớp rồi chỉnh từ đó.
Xem trước, rồi sao chép CSS
Đổi màu Nền và màu Phần tử và chuyển hình dạng giữa Bo góc, Vuông và Tròn để thử trên bề mặt thật. Khi đã ưng, bấm Sao chép để đưa toàn bộ quy tắc box-shadow vào clipboard.
Tính Năng
Thanh Trượt Trực Quan
Offset X, Offset Y, Blur và Spread mỗi cái có một thanh trượt kèm ô nhập số, nên bạn kéo cho nhanh hoặc gõ cho chính xác.
Màu & Độ Mờ
Chọn màu bóng bất kỳ và đặt độ mờ từ 0 đến 100% để có bóng tinh tế, trông tự nhiên thay vì đen gắt.
Công Tắc Inset
Chuyển mỗi lớp giữa bóng ngoài và bóng trong để tạo hiệu ứng bị nhấn, lõm vào hay ô nhập liệu.
Tối Đa 10 Lớp
Xếp nhiều bóng với thiết lập độc lập, rồi thêm, xóa hoặc ẩn từng lớp để dựng chiều sâu chân thực, nhiều tầng.
9 Mẫu Có Sẵn
Bắt đầu từ Subtle, Elevated, Strong, Soft, Neon, Inset, Neumorph, Material hay Float, rồi tùy chỉnh cho hợp thiết kế của bạn.
Xem Trước Tùy Chỉnh
Đổi màu nền và màu phần tử để thử bóng của bạn trên đúng bề mặt nơi nó sẽ thực sự xuất hiện.
Hình Dạng Xem Trước
Chuyển phần tử xem trước giữa Bo góc, Vuông và Tròn để khớp với thành phần giao diện thật mà bạn đang tạo kiểu.
Xem Trước Trực Tiếp Theo Thời Gian Thực
Khung xem trước và code CSS được tạo cập nhật ngay khoảnh khắc bạn đổi bất kỳ giá trị nào, nên không phải đoán mò.
Sao Chép Một Chạm
Toàn bộ quy tắc box-shadow, gồm mọi lớp, được sao chép vào clipboard chỉ với một cú bấm.
Câu Hỏi Thường Gặp
Thuộc tính box-shadow trong CSS là gì?
box-shadow thêm một bóng đổ quanh phần tử. Các giá trị của nó, theo thứ tự, là độ lệch ngang, độ lệch dọc, bán kính blur, bán kính spread và màu, kèm từ khóa inset tùy chọn. Công cụ này dựng đúng chuỗi đó cho bạn từ các thanh trượt.
Các giá trị offset, blur và spread có nghĩa gì?
Offset X dịch bóng sang trái hoặc phải, Offset Y dịch lên hoặc xuống, Blur điều khiển viền mềm đến đâu (0 là viền sắc nét), còn Spread mở rộng bóng với giá trị dương hoặc thu nhỏ với giá trị âm.
Tùy chọn box-shadow inset làm gì?
Công tắc Inset đổi một bóng từ bóng ngoài thành bóng trong. Bóng trong nằm bên trong phần tử để tạo vẻ bị nhấn xuống hoặc lõm vào, thường gặp ở ô nhập liệu và nút đang được nhấn.
Làm sao để thêm nhiều box shadow?
Bấm Thêm lớp để xếp một bóng mới lên trên bóng hiện tại, tối đa 10 lớp. Mỗi lớp giữ riêng offset, blur, spread, màu, độ mờ và inset của nó, và công cụ ghép chúng thành một quy tắc box-shadow duy nhất, phân tách bằng dấu phẩy.
Làm sao để tạo một bóng mềm, tinh tế?
Dùng độ mờ thấp (khoảng 10 đến 25%), tránh đen tuyền, và xếp hai hoặc ba bóng nhẹ thay vì một bóng đậm. Mẫu Soft và Elevated được dựng đúng theo cách này và là điểm khởi đầu tốt.
Tôi có thể dùng bóng màu thay vì đen không?
Có. Mở bộ chọn màu và chọn sắc độ bất kỳ hợp với bảng màu của bạn; bóng màu thường trông sống động hơn bóng đen trơn. Mẫu Neon cho thấy một quầng sáng màu được dựng từ spread và một tông màu rực rỡ.
Code CSS được tạo có tương thích với mọi trình duyệt không?
Có. box-shadow được mọi trình duyệt hiện đại hỗ trợ, gồm Chrome, Firefox, Safari và Edge, và không cần tiền tố nhà cung cấp, nên bạn có thể dán kết quả thẳng vào stylesheet.
Chưa có bình luận nào. Hãy là người đầu tiên!