Những công cụ lập trình bạn dùng mỗi ngày, gom lại một chỗ.

Bộ chuyển đổi, bộ định dạng, hàm băm, bộ kiểm tra và những tiện ích nhỏ bạn cứ mở đi mở lại nay nằm chung một nơi thay vì thất lạc khắp các tab.

GitHub

/ Công cụ

■

/ Tìm công cụ

109 công cụ

/ Trình tạo Box Shadow

Mẫu có sẵn

Đổ bóng (2/5)

Đổ bóng 1

Inset

Ngang: 0px

Dọc: 4px

Làm mờ: 6px

Lan rộng: -1px

Màu

Độ mờ: 10%

Đổ bóng 2

Inset

Ngang: 0px

Dọc: 2px

Làm mờ: 4px

Lan rộng: -2px

Màu

Độ mờ: 10%

Nền xem trước

Xem trước

Mã CSS

Giá trị tùy ý Tailwind

/ Công cụ đã chọn

■

Trình tạo Box Shadow - công cụ tạo miễn phí

Trình tạo box-shadow CSS trực quan với hỗ trợ nhiều bóng đổ

■ 01

CSS Box Shadow là gì?

Thuộc tính CSS box-shadow thêm hiệu ứng bóng đổ quanh khung của một phần tử. Bạn có thể đặt nhiều bóng phân tách bằng dấu phẩy. Mỗi bóng được mô tả bằng độ lệch ngang và dọc, bán kính mờ và lan, màu sắc, và…

■ 02

Nó hoạt động như thế nào?

Box shadow được định nghĩa bằng nhiều giá trị: độ lệch ngang (dương dịch sang phải), độ lệch dọc (dương dịch xuống dưới), bán kính mờ (lớn hơn nghĩa là mờ hơn), bán kính lan (dương mở rộng, âm thu nhỏ), và…

■ 03

Các trường hợp mẫu

Bao gồm Bóng tinh tế, Độ nâng vừa và Bóng bên trong để bạn có thể nhanh chóng so sánh các đầu vào và đầu ra thông dụng.

/ Công cụ liên quan

/ Mã nguồn

■

Mã nguồn từ công cụ đã chọn, hiển thị ở đây bên cạnh phiên bản trực tiếp ở bên phải.

/ Mã nguồn

TypeScript

typescript

// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;