Trình tạo Box Shadow CSS

Giới thiệu về Trình tạo Box Shadow CSS

Trình tạo Box Shadow CSS cho phép bạn thiết kế trực quan các hiệu ứng box-shadow và sao chép ngay lập tức mã CSS sẵn sàng cho sản phẩm. Xếp chồng nhiều lớp bóng, chọn từ các cài đặt sẵn được lấy cảm hứng từ Material Design, Tailwind CSS và Neumorphism, hoặc kéo trực tiếp trên bản xem trước để định vị bóng của bạn. Mọi thứ đều chạy trong trình duyệt của bạn — mã của bạn không bao giờ rời khỏi trang web.

Cách sử dụng Trình tạo Box Shadow CSS

1. Điều chỉnh các nút điều khiển bóng — Sử dụng các thanh trượt để đặt độ lệch ngang (X), độ lệch dọc (Y), bán kính mờ và bán kính lan tỏa. Bạn cũng có thể kéo trực tiếp trên khu vực xem trước để định vị lại bóng một cách trực quan.
2. Chọn màu sắc và độ mờ đục — Chọn màu bóng bằng trình chọn màu và tinh chỉnh độ trong suốt bằng thanh trượt độ mờ đục. Bản xem trước sẽ cập nhật theo thời gian thực.
3. Thêm nhiều lớp hoặc cài đặt sẵn — Nhấp vào + Thêm lớp bóng đổ để xếp chồng các bóng tạo chiều sâu thực tế. Hoặc chọn một cài đặt sẵn (Material, Tailwind, Neumorphism, v.v.) để bắt đầu với một thiết kế đã được chứng minh.
4. Sao chép mã CSS — Nhấp vào Sao chép để lấy mã box-shadow đã tạo và dán trực tiếp vào bảng kiểu của bạn.

Hiểu về cú pháp box-shadow

Mẹo để tạo Box Shadow chuyên nghiệp

• Xếp chồng nhiều bóng — Các vật thể trong thế giới thực thường đổ bóng phức tạp. Sử dụng 2-3 lớp (một lớp môi trường mềm + một lớp ánh sáng chính sắc nét hơn) tạo ra kết quả chân thực hơn nhiều so với một bóng đơn lẻ.
• Sử dụng độ mờ thấp — Bóng có độ mờ từ 8-20% trông rất tự nhiên. Tránh bóng đen có độ mờ cao vì chúng có thể trông thô và lỗi thời.
• Khớp hướng ánh sáng — Giữ cho độ lệch bóng nhất quán trên toàn bộ giao diện người dùng của bạn để mô phỏng một nguồn sáng duy nhất. Bóng đổ không đồng nhất sẽ phá vỡ ảo giác thị giác.
• Bóng đổ có màu — Thay vì màu đen, hãy thử sử dụng một sắc thái đậm hơn của màu nền phần tử để có cái nhìn gắn kết và hiện đại hơn.
• Lan tỏa âm (Negative spread) — Giá trị spread âm làm cho bóng nhỏ hơn phần tử, tạo ra một bóng tiếp xúc tinh tế giúp phần tử "đứng vững" trên nền mà không có các cạnh lộ rõ.

Giải thích các phong cách bóng phổ biến

• Material Design Elevation — Sử dụng hai lớp bóng: một bóng môi trường mềm hơn và một bóng chính sắc nét hơn. Các mức độ cao khác nhau (1-5) làm tăng độ lệch và độ mờ dần dần.
• Tailwind CSS Utilities — Tailwind cung cấp các lớp shadow, shadow-md, shadow-lg, shadow-xl và shadow-2xl, mỗi lớp sử dụng bóng hai lớp được tối ưu hóa cho các trường hợp sử dụng thẻ và modal phổ biến.
• Neumorphism — Tạo hiệu ứng nhựa đúc mềm bằng cách sử dụng hai bóng đối lập (một sáng, một tối). Hoạt động tốt nhất trên nền xám nhạt nơi cả hai bóng đều có thể nhìn thấy.
• Glassmorphism — Kết hợp bóng đổ nhẹ nhàng với hiệu ứng làm mờ backdrop-filter và nền bán trong suốt. Bóng đổ thêm chiều sâu bên dưới hiệu ứng kính mờ.

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

Thuộc tính CSS box-shadow là gì?

Thuộc tính CSS box-shadow thêm hiệu ứng bóng đổ xung quanh khung của một phần tử. Nó chấp nhận các giá trị cho độ lệch ngang, độ lệch dọc, bán kính mờ, bán kính lan tỏa và màu sắc. Nhiều bóng đổ có thể được phân tách bằng dấu phẩy để tạo hiệu ứng chiều sâu phân lớp.

Làm cách nào để tạo nhiều box shadow trong CSS?

Nhiều box shadow được tạo bằng cách phân tách từng định nghĩa bóng bằng dấu phẩy. Ví dụ: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Mỗi bóng được hiển thị chồng lên bóng trước đó, với bóng đầu tiên xuất hiện ở trên cùng.

Sự khác biệt giữa box-shadow và drop-shadow là gì?

box-shadow áp dụng bóng cho khung hình chữ nhật của phần tử, trong khi filter: drop-shadow() tuân theo hình dạng thực tế bao gồm cả các vùng trong suốt. box-shadow hỗ trợ bán kính lan tỏa và chế độ inset, những thứ mà drop-shadow không có. Đối với các phần tử hình chữ nhật tiêu chuẩn, box-shadow thường được sử dụng và có hiệu suất tốt hơn.

Bóng đổ bên trong (inset box shadow) là gì?

Một bóng đổ bên trong xuất hiện bên trong phần tử thay vì bên ngoài. Nó được tạo bằng cách thêm từ khóa inset trước các giá trị bóng. Bóng đổ inset thường được sử dụng cho các hiệu ứng nút bị nhấn, tạo kiểu trường nhập liệu và tạo giao diện lõm hoặc chạm khắc.

Các giá trị box-shadow nào tốt cho hiệu ứng thẻ (card) nhẹ nhàng?

Một kiểu bóng thẻ nhẹ nhàng phổ biến sử dụng hai lớp: 0 1px 3px rgba(0,0,0,0.12) cho bóng gần và 0 1px 2px rgba(0,0,0,0.24) để tạo độ nét. Tailwind CSS sử dụng 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) cho tiện ích bóng mặc định của nó.

Công cụ chỉnh sửa văn bản:

• Thêm Ngắt Dòng
• Thêm số dòng
• Thêm tiền tố và hậu tố vào văn bản
• Trình Viết Email AI Mới
• Trình kiểm tra ngữ pháp AI
• Paraphraser AI Mới
• AI Trình thêm dấu câu
• Trình Mở Rộng Câu AI Mới
• Trình nhân hóa văn bản AI Phổ biến
• Công cụ tạo nghệ thuật ASCII
• Ngắt dòng theo số lượng ký tự
• Công cụ Mã hóa Caesar Phổ biến
• Làm Đẹp CSS Mới
• Trình tạo Box Shadow CSS Mới
• Công Cụ Tạo Chữ Đẹp Phổ biến
• Tìm và Thay thế Văn bản
• Làm đẹp HTML Mới
• Bộ chuyển đổi HTML sang Markdown Mới
• Công cụ xóa ký tự vô hình
• Công cụ tạo văn bản vô hình
• Công cụ nén/làm đẹp JavaScript Mới
• Trình Định dạng và Xác thực JSON Mới
• Xóa công cụ trùng lặp danh sách
• Máy tính sự khác biệt danh sách
• Chữ Thường - Chữ Hoa Phổ biến
• Trình soạn thảo Markdown Phổ biến
• Trình Dịch Pig Latin Mới
• 🔍 Kiểm tra Đạo văn Phổ biến
• Loại bỏ công cụ dấu
• Xóa Dòng Trùng Lặp
• Xóa các dòng trống
• Xóa khoảng trắng ở đầu và cuối
• Xóa dòng mới
• Xóa số dòng
• Xóa các dòng có chứa một chuỗi
• Công cụ loại bỏ dấu câu trực tuyến Phổ biến
• Xóa dấu cách Phổ biến
• Đảo ngược dòng
• Đảo ngược văn bản Phổ biến
• Trình tạo Schema Markup Mới
• Trình tạo văn bản nhỏ ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾
• Trình Tạo Văn Bản Gạch Ngang Mới
• Công cụ lặp chuỗi
• Trình định dạng văn bản
• Công cụ lặp lại văn bản
• Công cụ Chuyển đổi Văn bản sang Danh sách SQL
• Trình chuyển đổi chữ hoa tiêu đề
• Công Cụ Tạo Văn Bản Ngược Đầu
• Công cụ Hiển thị Khoảng trắng Mới
• Trình Định dạng & Xác thực YAML Mới
• Công cụ tạo văn bản Zalgo