Trình tạo đổ bóng CSS

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách dựng một box shadow CSS

1. 01

   Định vị bóng đổ

   Đặt Độ lệch ngang và Độ lệch dọc, mỗi cái từ -80 đến 80 px. Giá trị âm đẩy bóng sang trái hoặc lên trên; số không đặt bóng vào giữa phía sau thẻ. Không gian làm việc mở ở 12 px sang phải và 18 px xuống dưới, một vị trí drop-shadow kinh điển.

2. 02

   Tinh chỉnh độ nhòe và độ lan

   Điều chỉnh Bán kính nhòe từ 0 đến 120 px cho độ mềm — mặc định là 32 px — và Bán kính lan từ -40 đến 60 px để phóng to hay thu nhỏ bóng trước khi áp dụng độ nhòe. Độ lan mặc định -4 px siết bóng lại một chút cho mép sắc hơn.

3. 03

   Đặt màu và độ mờ

   Chọn một Màu bóng sáu chữ số — mặc định #0b0d12 là màu gần đen — và đặt Độ mờ bóng từ 0 đến 1 theo bước 0.01. Độ mờ trở thành kênh alpha của màu rgba() trong đầu ra, nên 0.28 render thành rgba(11, 13, 18, 0.28).

4. 04

   Bật chế độ inset

   Bật Bóng inset để đưa bóng vào bên trong hộp, tạo cảm giác bề mặt bị nhấn hoặc lõm xuống — hữu ích cho trường nhập liệu và nút đang bật. Khai báo được tạo sẽ thêm từ khóa inset lên đầu khi công tắc bật.

5. 05

   So sánh với mẫu

   Nhấn Tải mẫu để lấy một kiểu tham chiếu sắc nét: độ lệch 8 px trên cả hai trục với nhòe và lan đều bằng không, màu #0f4cff ở độ mờ 0.35 — một đường viền lệch mép cứng. Đặt lại đưa về bóng mềm mặc định, và bản xem trước trực tiếp render lại theo mọi thay đổi.

6. 06

   Sao chép hoặc tải xuống CSS

   Nhấn Sao chép CSS để chép quy tắc .shadow-card, hoặc Tải xuống .css để lưu thành toolars-box-shadow.css. Việc sao chép bị chặn khi có giá trị nào ngoài dải, nên khai báo bạn dán luôn hợp lệ.