Trình tạo đổ bóng CSS box-shadow
Tạo box-shadow bằng cách kéo thanh trượt và xem kết quả ngay trên một thẻ. Xếp tối đa sáu lớp để có bóng mềm và chân thực hơn, dùng inset cho hiệu ứng nhấn lõm, và bắt đầu từ mẫu sẵn như nhẹ, nổi, phát sáng hay neumorphism. Sao chép CSS chỉ bằng một cú nhấp.
Cách sử dụng
- Chọn mẫu sẵn hoặc chỉnh độ lệch, độ mờ, độ lan, màu và độ mờ đục của bóng.
- Thêm lớp bằng + và chọn từng lớp để chỉnh sửa; đổi nền, màu hộp và độ bo góc cho khớp với thiết kế của bạn.
- Sao chép CSS và dán vào quy tắc của phần tử.
Câu hỏi thường gặp
Độ mờ và độ lan có tác dụng gì?
Độ mờ (blur) làm viền bóng mềm hơn; bằng 0 thì viền sắc nét. Độ lan (spread) mở rộng bóng ra mọi hướng trước khi làm mờ, và giá trị âm thì thu nhỏ bóng, giúp một bóng mờ lớn nằm gọn dưới phần tử.
Vì sao nên dùng nhiều lớp bóng?
Bóng thật đậm hơn ở gần vật thể và nhạt dần khi ra xa. Kết hợp một bóng nhỏ, sắc nét với một bóng lớn, mềm hơn sẽ mô phỏng điều đó và trông tự nhiên hơn một bóng đơn. Lớp đầu tiên trong danh sách được vẽ trên cùng.
box-shadow có làm trang chậm đi không?
Không, khi dùng bình thường. Độ mờ rất lớn trên nhiều phần tử, hoặc tạo hiệu ứng động cho chính bóng, có thể tốn hiệu năng trên điện thoại yếu; để tạo hiệu ứng, hãy đổi độ mờ đục của một phần tử giả mang bóng.
🏷️ Trình tạo meta tag
🖼️ Trình tạo Open Graph
🔗 Trình tạo liên kết UTM
🌈 Trình tạo CSS gradient