Trình tạo Box Shadow CSS
Tinh chỉnh độ lệch, độ mờ, độ giãn, màu sắc và độ trong suốt bằng các thanh trượt trực tiếp, xem trước kết quả trên nền sáng hoặc tối, rồi sao chép đoạn box-shadow CSS gọn gàng — tất cả ngay trong trình duyệt của bạn.
Độ lệch X
px
Độ lệch Y
px
Độ mờ
px
Độ giãn
px
Màu sắc
#0a0a0a
Độ trong suốt
%
box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);
Cách sử dụng Trình tạo Box Shadow CSS
- 1
Đặt độ lệch
Dùng thanh trượt độ lệch X và Y để đẩy bóng sang trái, phải, lên hoặc xuống. Giá trị Y dương đặt bóng xuống dưới phần tử, còn giá trị âm sẽ nâng bóng lên trên.
- 2
Tạo hình cho bóng
Tăng độ mờ để có viền mềm, lan tỏa, hoặc giữ thấp để bóng sắc nét. Độ giãn làm bóng lớn lên hoặc nhỏ lại trước khi áp dụng độ mờ.
- 3
Chọn màu và độ trong suốt
Nhấp vào ô màu để chọn màu cho bóng, rồi đặt độ trong suốt. Bóng tối mềm với độ trong suốt thấp trông tự nhiên nhất trên nền sáng.
- 4
Sao chép CSS
Bật Inset nếu bạn cần bóng bên trong, xem trước trên nền sáng hoặc tối, rồi sao chép dòng box-shadow vào tệp stylesheet của bạn.
Câu hỏi thường gặp
Làm thế nào để tạo box shadow CSS?
Mỗi giá trị trong box-shadow có ý nghĩa gì?
Inset shadow là gì?
Làm sao để tạo bóng mềm, tự nhiên?
Dữ liệu của tôi có được tải lên máy chủ không?
Công cụ liên quan
Tiếp tục với những công cụ hữu ích này