Go Toolstack

Tạo đổ bóng CSS (Box Shadow)

Tùy chỉnh trực quan hiệu ứng đổ bóng hộp (Box Shadow) đa tầng, độ mờ và màu sắc

Tạo đổ bóng CSS (Box Shadow)

Tùy chỉnh trực quan hiệu ứng đổ bóng hộp (Box Shadow) đa tầng, độ mờ và màu sắc

Cách thức hoạt động

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Các tiện ích bổ sung cho quy trình làm việc của bạn

Trung tâm Hình ảnh & Đồ họa • Quy trình làm việc & Hướng dẫn so sánh

Khám phá toàn bộ công cụ hình ảnh & đồ họa, giới hạn trình duyệt và hướng dẫn lựa chọn.

Khám phá trung tâm →
Trình định dạng JSON

Định dạng, làm đẹp, nén và kiểm tra cú pháp JSON trực tuyến theo chuẩn RFC 8259
Bộ chuyển đổi Base64

Mã hóa và giải mã văn bản UTF-8 hoặc tệp nhị phân sang định dạng Base64
Định dạng SQL

Làm đẹp và định dạng câu lệnh SQL với thụt lề chuẩn và viết hoa từ khóa

Hướng dẫn blog liên quan

Hướng dẫn kỹ thuật, khắc phục sự cố và quy trình tối ưu thực tế

Trung tâm kiến thức

Trình tạo đổ bóng CSS (Box Shadow Generator): Thiết kế chiều sâu và bóng mờ đa tầng

Trong thiết kế giao diện hiện đại (Neumorphism, Material Design hay Flat Design), thuộc tính đổ bóng box-shadow trong CSS là chìa khóa để tạo cảm giác về chiều sâu không gian (Elevation), độ nổi khối của các nút bấm và làm nổi bật các thẻ thông tin quan trọng so với nền trang web.

Công cụ này cung cấp bảng điều khiển trực quan theo thời gian thực để bạn tinh chỉnh các tham số: độ lệch ngang (X Offset), độ lệch dọc (Y Offset), bán kính làm mờ (Blur Radius), độ lan tỏa (Spread Radius), màu bóng với độ trong suốt alpha và tùy chọn bóng đổ vào trong (Inset). Đặc biệt, bạn có thể tạo nhiều lớp bóng xếp chồng để tạo hiệu ứng bóng đổ mịn màng, chân thực và tự nhiên như ánh sáng thật.

Công thức & Nguyên lý kỹ thuật

CSS box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color]

Hiệu ứng bóng được tính toán bằng cách tạo bản sao hình học của phần tử, dịch chuyển theo tọa độ X/Y, làm mờ theo thuật toán Gaussian Blur và mở rộng đường biên theo giá trị spread trước khi hòa trộn màu sắc.

Thực hành tốt nhất & Hướng dẫn thiết yếu

  • Xếp chồng nhiều lớp bóng mờ (Multi-layered Shadows): Thay vì dùng một lớp bóng đậm và thô, hãy kết hợp 2-3 lớp bóng mờ nhẹ với độ lan tỏa khác nhau để tạo cảm giác đổ bóng tự nhiên như ánh sáng thực tế.
  • Sử dụng màu bóng có kênh Alpha: Luôn dùng định dạng màu rgba() hoặc hsla() cho màu bóng với độ trong suốt 10% - 25% để bóng hòa hợp mượt mà với màu nền phía dưới.
  • Tạo hiệu ứng nổi khi di chuột (Hover Effect): Tăng giá trị Y Offset và Blur Radius khi người dùng rê chuột vào thẻ để tạo cảm giác phần tử được nâng cao lên trong không gian.
  • Dùng bóng trong (Inset) cho nút nhấn: Áp dụng tùy chọn Inset khi thiết kế trạng thái active của nút bấm hoặc ô nhập liệu để tạo cảm giác nút đang bị ấn lún xuống.

Câu hỏi thường gặp (FAQ)

Làm thế nào để tạo hiệu ứng bóng đổ mềm mại, không bị gắt?
Bí quyết là tăng bán kính làm mờ (Blur) lên gấp đôi hoặc gấp ba độ lệch Y, đồng thời giảm độ đậm của màu bóng xuống khoảng rgba(0, 0, 0, 0.08) và kết hợp nhiều lớp bóng.
Tùy chọn Inset hoạt động như thế nào?
Khi bật Inset, bóng sẽ đổ vào bên trong khung viền của phần tử thay vì tỏa ra bên ngoài, tạo hiệu ứng thị giác như một bề mặt bị lõm xuống.
Mã CSS tạo ra có tương thích với các trình duyệt cũ không?
Thuộc tính box-shadow là tiêu chuẩn CSS3 chính thức và được hỗ trợ hoàn hảo trên 100% các trình duyệt web hiện đại mà không cần thêm tiền tố -webkit-.
Tôi có thể sao chép mã cho cả thuộc tính Tailwind CSS không?
Công cụ cung cấp mã CSS tiêu chuẩn thuần túy, bạn có thể dễ dàng dán giá trị vào cấu hình tailwind.config.js trong mục boxShadow của dự án.