Tạo box shadow CSS

Cách sử dụng Tạo box shadow CSS

1. 1

   Chọn bóng khởi đầu

   Nhấp vào một mẫu như Mềm, Nhiều lớp hoặc Độ nổi 2, hoặc chỉnh lớp mặc định.

2. 2

   Tạo hình từng lớp

   Chọn một lớp rồi đặt độ lệch X và Y, độ nhòe, độ lan, màu, độ mờ đục và Bóng trong.

3. 3

   Kiểm tra trên bề mặt của bạn

   Đổi kích thước hộp, bo góc và màu sắc cho khớp với phần tử bạn đang tạo kiểu.

4. 4

   Sao chép CSS

   Sao chép khai báo box-shadow hoặc class Tailwind vào mã của bạn.

Về Tạo box shadow CSS

Thuộc tính box-shadow trong CSS nhận một danh sách các lớp, mỗi lớp gồm độ lệch ngang và dọc, bán kính nhòe, độ lan, màu và từ khóa inset (tùy chọn). Muốn có chiều sâu trông tự nhiên, bạn phải cân chỉnh tất cả các giá trị này trên hai lớp trở lên, và việc sửa số trực tiếp trong stylesheet khá khó. Trình chỉnh sửa này hiển thị kết quả trên hộp xem trước ngay khi bạn kéo thanh trượt, đồng thời viết sẵn khai báo CSS và class Tailwind shadow-[…].

Bạn có thể thêm bao nhiêu lớp tùy ý, ẩn tạm một lớp để so sánh, di chuyển lớp lên hoặc xuống (lớp đầu tiên trong danh sách được vẽ trên cùng), hoặc chuyển sang Bóng trong cho nút bấm và ô nhập liệu. Độ lệch từ −100 đến 100 pixel, độ nhòe tối đa 200 pixel, độ lan từ −100 đến 100, và mỗi màu có độ mờ đục riêng. Độ lan âm là bí quyết của bóng mềm hiện đại: bóng thu vào dưới phần tử nên chỉ còn quầng sáng nhẹ phía dưới.

Hộp xem trước có thể đổi kích thước, bo góc tùy ý, đổi màu hộp và màu nền, nên bạn đánh giá được bóng trên đúng bề mặt thiết kế, kể cả giao diện tối, nơi bóng cần độ mờ đục cao hơn hoặc quầng sáng có màu.

Công cụ có sẵn mười hai mẫu: bốn mức độ nổi theo Material Design, một lớp mềm, bóng mượt năm lớp, bóng lệch cứng kiểu neubrutalism, neumorphism, bóng trong, quầng sáng màu, viền ngoài kiểu focus và thẻ lơ lửng. Gradient nằm ở tab khác; bóng chữ và bộ lọc drop-shadow() không nằm trong phạm vi công cụ.

Tạo box shadow CSS: câu hỏi thường gặp