❖
PD Tools
🎨

Xưởng Hiệu Ứng Thị Giác CSS Pro

100% Client-Side • Trình tạo Gradient đa điểm, Bo góc hữu cơ 8 giá trị & Cắt khối Clip-Path đa giác

Loại Gradient:
Góc quay (Angle):
Dải dừng màu (Color Stops):
Mẫu Gradient Chọn Lọc:
Chuẩn bo góc 8 giá trị (4 bán kính ngang / 4 bán kính dọc) tạo nên những hình khối giọt nước hữu cơ (Organic Blob) mềm mại.
↔️ Bán Kính Ngang (Horizontal):
Top-Left (H)
Top-Right (H)
Bottom-Right (H)
Bottom-Left (H)
↕️ Bán Kính Dọc (Vertical):
Top-Left (V)
Top-Right (V)
Bottom-Right (V)
Bottom-Left (V)
Khuôn Hình Mẫu:
Bật Chuyển Động Uốn Lượn (Blob Animation)

Sinh mã CSS @keyframes để hình khối tự động chuyển động liên tục

Hình Khối Clip-Path Mẫu:
Tọa Độ Các Điểm Neo (Polygon Points):
✨ PhuDuy Studio
Mã Nguồn CSS Tạo Ra Tức Thì: 100% Valid CSS3
@keyframes blobMorph Animation:

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 Khối Giọt Nước Blob Bằng Bo Góc 8 Giá Trị

1 Bước 1

Điều Chỉnh Bán Kính Ngang & Dọc

Kéo các thanh trượt 4 góc theo phương ngang và dọc để tạo dáng cho hình khối.

2 Bước 2

Bật Hoạt Ảnh Uốn Lượn (Tùy Chọn)

Bật chuyển động Blob để tự sinh mã CSS @keyframes biến đổi mềm mại.

3 Bước 3

Sao Chép Mã CSS Thuần Hoặc Tailwind

Sao chép và áp dụng ngay cho ảnh đại diện avatar hoặc thẻ card dự án.

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

Q1 Chuẩn bo góc 8 giá trị trong CSS là gì?
Là cú pháp cho phép định nghĩa độc lập 4 bán kính ngang và 4 bán kính dọc phân tách bằng dấu gạch chéo /, tạo nên các góc elip bất đối xứng tự nhiên.
Q2 Công cụ có tạo được hiệu ứng chuyển động uốn lượn liên tục không?
Có, chỉ cần bật tính năng Hoạt ảnh Blob, hệ thống sẽ tự động sinh mã CSS @keyframes để hình khối biến đổi nhịp nhàng.
Q3 Có thể xuất sang mã lớp tiện ích Tailwind CSS không?
Có, công cụ tự động đóng gói giá trị vào cú pháp Arbitrary Value như rounded-[30%_70%_70%_30%/30%_30%_70%_70%].
Q4 Những hình khối mẫu nào có sẵn trong thư viện?
Bao gồm Viên sỏi, Quả trứng, Giọt nước, Chiếc khiên, Hạt đậu và Cỏ bốn lá mềm mại.
Q5 Công cụ có chạy mượt mà trên máy khách không?
Chạy 100% trên máy khách trong bộ nhớ RAM trình duyệt, không giật lag và không thu thập dữ liệu.
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ụ →
math
Quy Đổi Ngoại Tệ & Phí Thẻ

Quy đổi tỷ giá ngoại tệ trực tiếp, mô phỏng phí quẹt thẻ quốc tế Visa/Master, sửa tỷ giá mua bán thực tế & dùng Offline.

Khám phá ngay →
system
Kiểm Tra Độ Phân Giải Màn Hình Online

Kiểm tra độ phân giải màn hình máy tính và điện thoại trực tuyến: Thước đo Viewport thời gian thực, tỷ lệ điểm ảnh Retina DPR, tần số Hz và độ sâu màu 100% Client-Side.

Khám phá ngay →
developer
Tạo Thẻ Meta SEO & Mạng Xã Hội

Tạo thẻ Meta SEO chuẩn W3C, đo pixel Google SERP và mô phỏng hiển thị trên Zalo, Facebook, X/Twitter tức thì.

Khám phá ngay →
media
Đóng Dấu Bản Quyền Ảnh

Chèn watermark đóng dấu bản quyền ảnh hàng loạt với chữ hoặc logo PNG trong suốt, lưới 9 vị trí và phủ kín toàn ảnh chống cắt trộm.

Khám phá ngay →