❖
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 Dải Màu Gradient CSS Trực Quan

1 Bước 1

Chọn Kiểu Gradient & Góc Quay

Chọn Linear, Radial, Conic hoặc Mesh và xoay góc nghiêng tùy ý.

2 Bước 2

Tinh Chỉnh Điểm Dừng Màu

Chọn mã màu và kéo thanh trượt vị trí phần trăm trên dải màu.

3 Bước 3

Sao Chép Mã CSS

Sao chép đoạn mã CSS thuần hoặc Tailwind để áp dụng cho nút bấm, thẻ bài hoặc nền trang web.

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

Q1 Những loại gradient nào được hỗ trợ trong công cụ?
Công cụ hỗ trợ đầy đủ Linear Gradient (góc quay 0-360 độ), Radial Gradient, Conic Gradient và mô phỏng dải màu Mesh Gradient đa tầng.
Q2 Tôi có thể thêm bao nhiêu điểm dừng màu?
Bạn có thể tự do thêm và điều chỉnh vị trí của tối đa 6 điểm dừng màu khác nhau trên cùng một dải màu.
Q3 Làm thế nào để xuất mã gradient sang Tailwind CSS?
Chỉ cần nhấp vào nút Tailwind, mã tiện ích dạng Arbitrary Background sẽ được sao chép vào bộ nhớ tạm ngay lập tức.
Q4 Công cụ có sẵn các mẫu dải màu đẹp không?
Có hơn 20 mẫu gradient tuyển chọn nghệ thuật như Hoàng hôn, Cực quang, Neon Cyberpunk, Pastel Dream và Không gian sâu.
Q5 Dữ liệu thiết kế màu sắc có được giữ riêng tư không?
Hoàn toàn bảo mật 100% trong bộ nhớ trình duyệt máy khách, không gửi bất kỳ dữ liệu nào qua mạng.
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 →