Tạo CSS Box Shadow
Xây dựng CSS box shadow nhiều lớp trực quan với xem trước trực tiếp — sao chép CSS chỉ một cú nhấp
Preview
Shadow Layers
(1/8)CSS Output
box-shadow: 0px 8px 24px -4px rgba(99, 102, 241, 0.5);
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity for each layer, then copy the ready CSS.
FAQ
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1).
How do I add multiple shadows?
Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.05).
What is an inset shadow?
Adding the 'inset' keyword makes the shadow appear inside the element rather than outside — useful for pressed button states.
Tiếp tục khám phá
Công cụ Công cụ Developer khác bạn có thể thích…
Định dạng JSON
Định dạng, kiểm tra và nén JSON với tô sáng cú pháp và phát hiện lỗi
Mã hóa/Giải mã Base64
Mã hóa văn bản hoặc file sang Base64 và giải mã chuỗi Base64 thành văn bản
Mã hóa/Giải mã URL
Mã hóa và giải mã thành phần URL và tham số query string
Tạo UUID
Tạo UUID ngẫu nhiên (v1, v4) hoặc tạo hàng loạt nhiều UUID cùng lúc
Tạo Hash
Tạo hash MD5, SHA-1, SHA-256, SHA-512 từ văn bản hoặc file
Kiểm tra Regex
Kiểm tra biểu thức chính quy với tô sáng khớp thời gian thực và trích xuất nhóm
Giải mã JWT
Giải mã và kiểm tra JSON Web Token — xem header, payload và xác minh chữ ký
Định dạng HTML
Định dạng và làm đẹp mã HTML với thụt lề đúng và tô sáng cú pháp