CSS box-shadow generator

Tính năng của CSS box-shadow generator

• 01

  Mọi tham số dưới dạng thanh trượt

  Offsets ngang và dọc, bán kính mờ, bán kính lan truyền và độ mờ mỗi cái có thanh trượt của riêng mình cộng với đầu vào số — tinh chỉnh bằng kéo, sau đó nhấn từ bàn phím để có độ chính xác pixel.

• 02

  Hỗ trợ bóng bên trong

  Lật công tắc inset để chuyển từ bóng thả sang bóng bên trong — hữu ích cho các nút nhấn, đầu vào chìm và bề mặt neumorphic.

• 03

  Màu sắc + độ mờ, riêng biệt

  Chọn màu cơ sở ở bất kỳ giá trị hex nào, sau đó điều chỉnh độ mờ độc lập. Đầu ra sử dụng rgba() vì vậy màu sắc và alpha giữ được khả năng đọc khi bạn sao chép CSS.

Câu hỏi thường gặp về CSS box-shadow generator

Giá trị lan truyền làm gì?

Lan truyền tích cực phóng to bóng theo mọi hướng trước khi được áp dụng mờ; lan truyền âm tính thu nhỏ nó. Nó hữu ích cho ánh sáng chặt chẽ, xác định khi được ghép nối với mờ nhỏ.

Tôi có thể thêm nhiều bóng không?

Trình tạo này xuất ra khai báo bóng đơn. Để xếp chồng bóng, sao chép giá trị, sau đó dán nó hai lần trong CSS cách nhau bằng dấu phẩy — box-shadow chấp nhận danh sách phân tách bằng dấu phẩy.

Tại sao bóng bên trong của tôi không nhìn thấy?

Bóng bên trong vẽ bên trong phần tử, vì vậy chúng cần màu nền hoặc phần đệm để nhìn thấy. Chúng cũng sẽ không hiển thị trên các phần tử trong suốt hoặc kích thước không.

Có phải bản xem trước chính xác pixel không?

Có — bản xem trước sử dụng thuộc tính CSS box-shadow thực tế trên một phần tử thực, vì vậy những gì bạn thấy chính xác là những gì bảng kiểu của bạn sẽ hiển thị.