Tạo đổ bóng CSS
Kéo thanh trượt hoặc chọn preset — xem bóng trên thẻ trực tiếp và sao chép CSS box-shadow chỉ với một cú nhấp.
Preset
Lớp
0px
8px
24px
-8px
#000000
15%
Cách sử dụng
- Thẻ đã có sẵn một bóng mềm — kéo bất kỳ thanh trượt nào (độ lệch X/Y, độ mờ, độ lan), chọn màu và độ trong suốt, hoặc tích Inset để có bóng trong. Mọi thứ cập nhật trực tiếp, không cần nhấn nút.
- Nhấp vào một chip preset (Nổi mềm, Nâng mạnh, Inset, Phát sáng neon, Kép, Neumorphism) để tải ngay một diện mạo dựng sẵn.
- Thêm lớp bằng “+” để chồng bóng; mỗi lớp được chỉnh độc lập. Sao chép toàn bộ khai báo box-shadow chỉ với một cú nhấp.
Ví dụ
Preset
Nổi mềm
CSS box-shadow
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
Dán thẳng vào bất kỳ selector nào, ví dụ .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. Preset “Kép” xuất hai bóng cách nhau bằng dấu phẩy; “Neumorphism” cần nền sáng mới nhìn rõ.
Phạm vi, giới hạn và câu hỏi thường gặp
- Chỉ box-shadow: không có filter drop-shadow(), không text-shadow, và CSS không có bóng gradient — những thứ đó ngoài phạm vi.
- Màu đến từ bộ chọn cộng thanh trượt độ trong suốt; công cụ không phân tích chuỗi màu CSS dán vào, nên không có gì để gõ sai hay đọc sai.
- Neumorphism phụ thuộc bề mặt sáng — trên nền rất tối, hiệu ứng có thể không thấy. Đó là đặc tính của phong cách, không phải lỗi.
- Không lưu hay chia sẻ gì qua tham số trên liên kết: làm mới trang là quay về preset Nổi mềm mặc định. Mọi thứ chạy trong trình duyệt.
Công cụ liên quan
Khi bạn cần đi xa hơn với màu sắc hoặc bóng đổ.