❖
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 Cắt Khối Đa Giác Bằng CSS Clip-Path

1 Bước 1

Chọn Hình Dáng Mẫu

Chọn Tam giác, Ngôi sao, Lục giác, Mũi tên, Hộp thoại hoặc Huy hiệu.

2 Bước 2

Tinh Chỉnh Tọa Độ Các Điểm Neo

Thêm bớt điểm hoặc chỉnh trực tiếp các số phần trăm X% và Y%.

3 Bước 3

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

Sao chép đoạn mã và dán ngay vào thành phần web của bạn.

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

Q1 CSS clip-path polygon hoạt động như thế nào?
clip-path định nghĩa một vùng cắt bằng danh sách các cặp tọa độ X và Y theo phần trăm, ẩn đi toàn bộ phần nằm ngoài đa giác.
Q2 Tôi có thể thêm hoặc bớt các điểm neo của đa giác không?
Có, bạn có thể tự do thêm điểm đỉnh mới hoặc xóa bớt điểm với hiển thị trực tiếp trên khung Sandbox.
Q3 Làm sao để tạo bóng đổ cho hình đã bị cắt clip-path?
Bọc hình khối trong một thẻ div cha và áp dụng thuộc tính filter: drop-shadow(...) lên thẻ cha đó.
Q4 Mã xuất ra có dùng được trong dự án Tailwind CSS không?
Có, bấm nút Tailwind để sao chép cú pháp Arbitrary Class dạng [clip-path:polygon(...)].
Q5 Công cụ có đảm bảo tính riêng tư không?
Hoàn toàn bảo mật 100% trong bộ nhớ máy khách của trình duyệt, không gửi dữ liệu ra máy chủ bên ngoài.
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 →