❖
PD Tools
✨

Trình Tạo Đổ Bóng Đa Lớp Mềm Mại & Kính Mờ CSS Pro

Nội suy bóng đa tầng chuẩn Stripe & Apple, Glassmorphism, xuất CSS & Tailwind 100% Client-Side

Mẫu Đổ Bóng Sẵn Có
| |
🥞
Đổ Bóng Mịn Đa Tầng (Smooth Multi-Layer) Phân rã bóng thành 3 - 6 lớp mờ tự nhiên như Stripe & Apple
Thông Số Ánh Sáng & Tọa Độ Bóng
Độ lệch ngang (X-Offset)
Độ lệch dọc (Y-Offset)
Độ nhòe mờ (Blur Radius)
Độ lan tỏa (Spread Radius)
Độ đậm bóng (Opacity)
Màu sắc bóng đổ
Kính Mờ (Glassmorphism) & Bo Góc
Độ mờ hậu cảnh (Blur)
Bo góc (Border Radius)
Nền:
Số lớp bóng đang vẽ:
Xuất Mã Nguồn

Bảo Mật Cấp Doanh Nghiệp Trên Trình Duyệt 100% Trình Duyệt

Không thu thập dữ liệu, không lưu trữ đám mây. Mã nguồn, mật khẩu và tài liệu của bạn được bảo vệ 100% tại máy khách.

✓ Cách Tạo Bóng Đổ CSS Tùy Biến Trong 3 Bước

1 Bước 1

Điều Chỉnh Tọa Độ Ánh Sáng

Kéo thanh trượt trục X, trục Y, Blur, Spread và Opacity để định hình bóng đổ.

2 Bước 2

Chọn Kiểu Bóng Hoặc Mẫu Có Sẵn

Bật chế độ đổ bóng đa lớp hoặc chọn các preset giao diện thực tế.

3 Bước 3

Sao Chép CSS Hoặc Tailwind

Copy mã nguồn đã tối ưu và dán trực tiếp vào file CSS hoặc template web.

? Câu Hỏi Thường Gặp (FAQ)

Q1 Làm thế nào để tạo bóng mềm mại tự nhiên trong CSS?
Xếp chồng nhiều lớp box-shadow với độ nhòe (blur) tăng dần và độ đậm (opacity/alpha) rất nhỏ. Cách này mô phỏng sự tán xạ ánh sáng vật lý tự nhiên.
Q2 Cú pháp của thuộc tính box-shadow là gì?
Cú pháp: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color]. Có thể nối nhiều lớp bóng cách nhau bằng dấu phẩy.
Q3 Làm sao để tạo hiệu ứng phát sáng Neon với box-shadow?
Đặt độ lệch X và Y bằng 0, tăng độ nhòe blur lớn, spread dương nhẹ và chọn màu neon rực rỡ (cyan, hồng, tím) với độ đậm 30-50%.
Q4 Có thể xuất trực tiếp mã sang dự án Tailwind CSS không?
Có. Công cụ sinh trực tiếp chuỗi arbitrary class như shadow-[...] để dán thẳng vào class HTML của Tailwind v3 hoặc v4.
Q5 Công cụ có xử lý trên máy chủ không?
Không. Toàn bộ logic chạy 100% Client-Side trên trình duyệt web của bạn, bảo mật tuyệt đối dữ liệu thiết kế.
Hệ Sinh Thái

Công Cụ Dành Cho Lập Trình Viên

Xem trọn bộ danh mục →

100% Miễn phí · Dữ liệu luôn nằm trên thiết bị của bạn

Chuẩn BigInt

Định Dạng JSON & Sinh Kiểu

Bảo toàn số 64-bit BigInt, 1-click sửa lỗi dấu phẩy & sinh kiểu TypeScript/Go tức thì.

Mở công cụ →
Chuẩn Patch

So Sánh JSON Ngữ Nghĩa

Bỏ qua thứ tự khóa A-Z, lọc bỏ trường tự sinh (timestamp/id) & xuất chuẩn RFC 6902.

Mở công cụ →
Tự Sửa Lỗi

Kiểm Tra Cú Pháp JSON

Bắt lỗi chính xác từng dòng cột, nút tự động sửa lỗi 1-chạm & xác thực JSON Schema.

Mở công cụ →
Chuẩn UTF-8

Mã Hóa Base64 Toàn Năng

Bảo toàn UTF-8 tiếng Việt, chuẩn Base64URL, chuyển File sang Data URI & nhận diện Magic Bytes.

Mở công cụ →

🎲 Khám Phá Công Cụ Ngẫu Nhiên

Đề xuất tiện ích ngẫu nhiên trong hệ sinh thái 180+ công cụ bảo mật

Tất cả công cụ →
developer
Giải Mã URL & Lọc Thẻ UTM

Lenient chống sập URIError, đổi dấu + thành cách, giải mã đa lớp & 1-click lọc thẻ UTM.

Khám phá ngay →
random
Quay Số May Mắn & Vòng Xoay Quyết Định

Bộ công cụ ngẫu nhiên 5 trong 1: quay số trúng thưởng, vòng quay Canvas 60FPS, chia đội tự động, bốc thăm tên và rút bài tây.

Khám phá ngay →
developer
Mã Hóa URL Chuyên Sâu

Chuẩn Strict RFC 3986 OAuth, phân biệt component/full URL, dấu +/%20 & bóc tách tham số.

Khám phá ngay →
math
Đổi Đơn Vị Nhiệt Độ

Chuyển đổi nhiệt độ qua lại giữa Độ C (°C), Độ F (°F) và Kelvin (K) tức thì trong 0ms.

Khám phá ngay →