CSS Máy tạo bóng và thủy tinh

Công cụ này giúp bạn thiết kế đổ bóng CSS và hiệu ứng kính mờ bằng thanh trượt, xem trực tiếp trên một thẻ mẫu và sao chép CSS sẵn sàng dán vào dự án. Ở thẻ Box Shadow, mỗi lớp bóng có độ lệch ngang và dọc (-50 đến 50px), bán kính làm mờ (0 đến 100px), bán kính lan (-30 đến 50px), màu kèm độ mờ đục và ô Inset để tạo bóng bên trong. Kết quả mặc định là box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30);, màu được xuất dạng rgba.

Nút thêm lớp bóng cho phép chồng nhiều bóng; chúng được nối bằng dấu phẩy và lớp đầu danh sách được vẽ trên cùng. Bóng trông thật thường gồm một lớp gần và rõ cùng một lớp xa và mềm. Mẫu 3D Double chẳng hạn kết hợp 0 5px 5px và 0 20px 25px màu đen độ mờ đục thấp, trông tự nhiên hơn một bóng lớn duy nhất. Độ lan âm làm bóng nhỏ hơn phần tử, mẹo thường dùng cho bóng mềm dưới thẻ, còn mẫu Glow Light dùng màu thương hiệu, độ lệch bằng 0 và độ mờ lớn để tạo hiệu ứng phát sáng.

Thẻ Glassmorphism dùng để tạo thẻ kính mờ: chỉnh độ mờ nền phía sau (backdrop-filter: blur, 0 đến 40px), màu nền và độ mờ đục, cùng màu và độ mờ đục của viền 1px. CSS tạo ra có cả backdrop-filter và tiền tố -webkit-backdrop-filter mà Safari cần. Điểm mấu chốt là nền phải bán trong suốt và phía sau có nội dung; trên nền một màu thì không có gì để làm mờ, vì vậy khung xem trước cho phép đổi giữa nền chuyển màu và nền tối để so sánh.

Vài lưu ý khi dùng thực tế: áp dụng backdrop-filter cho vùng lớn có thể làm chậm điện thoại cấu hình thấp, nên chỉ dùng cho vài thẻ hoặc thanh điều hướng. Chú ý độ tương phản của chữ trên nền trong mờ; nếu độ mờ đục thấp, hãy làm đậm màu nền hoặc dùng chữ đậm hơn. Giá trị rgba dùng được ngay với biến CSS hoặc cú pháp giá trị tùy ý của Tailwind. Mọi thứ chạy trong trình duyệt, không cần đăng ký.