Trình tạo bố cục CSS Grid & Flexbox

Chuyển đổi giữa Grid và Flexbox, điều chỉnh số cột và hàng hoặc hướng và căn chỉnh của các phần tử flex và khoảng cách giữa chúng, với bản xem trước trực tiếp các hộp màu bên trong vùng chứa, sau đó sao chép mã CSS chính xác.

Công Cụ Thiết Kế và CSS Chạy hoàn toàn trong trình duyệt của bạn

Mọi xử lý đều diễn ra trên thiết bị của bạn — không có gì được gửi đến máy chủ.

Cột3Hàng2Khoảng cách12px

Mã CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;

Tiếp tục với

Hoàn toàn cục bộ

Trình tạo Clip-Path CSS

Chọn một hình dạng có sẵn (hình tròn, tam giác, ngôi sao, bong bóng tin nhắn...) và sao chép mã clip-path.

Công Cụ Thiết Kế và CSSMở công cụ

Hoàn toàn cục bộ

Trình tạo đường cong Easing Cubic Bezier

Kéo hai điểm để thiết kế trực quan một đường cong easing chuyển động tùy chỉnh và sao chép mã cubic-bezier.

Công Cụ Thiết Kế và CSSMở công cụ

Hoàn toàn cục bộ

Trình tạo Glassmorphism CSS

Thiết kế trực quan hiệu ứng thẻ kính mờ và sao chép mã CSS sẵn sàng sử dụng.

Công Cụ Thiết Kế và CSSMở công cụ

Công cụ liên quan

Hoàn toàn cục bộ

Công Cụ Chuyển Văn Bản Thành Chữ Viết Tay

Biến văn bản đã gõ thành hình ảnh trông như được viết tay trên giấy kẻ ô ly, với nhiều kiểu chữ viết tay.

Công Cụ Thiết Kế và CSSMở công cụ

Hoàn toàn cục bộ

Công Cụ Tạo Hình Blob & Họa Tiết Nền SVG

Tạo một hình dạng hữu cơ ngẫu nhiên (blob) hoặc một họa tiết nền lặp lại liền mạch dưới dạng SVG, rồi sao chép hoặc tải xuống.

Công Cụ Thiết Kế và CSSMở công cụ

Hoàn toàn cục bộ

Công Cụ Tạo Hiệu Ứng CSS Keyframe

Thiết kế hiệu ứng CSS trực quan (hiện dần, trượt, zoom, nảy, xoay, lật) và nhận mã @keyframes sẵn sàng sử dụng.

Công Cụ Thiết Kế và CSSMở công cụ

Hoàn toàn cục bộ

Công Cụ Tạo Bảng Màu Hài Hòa

Chọn một màu gốc và nhận bảng màu hài hòa (bổ túc, tương đồng, bộ ba, bộ bốn, đơn sắc).

Công Cụ Thiết Kế và CSSMở công cụ

Hoàn toàn cục bộ

Công Cụ Tạo Gradient Lưới

Tạo nền gradient lưới nhiều điểm mềm mại chỉ với một cú nhấp, và sao chép mã CSS sẵn sàng sử dụng.

Công Cụ Thiết Kế và CSSMở công cụ

Sẵn sàng dùng thử Uddatak?

Duyệt qua thư viện công cụ đầy đủ và bắt đầu sử dụng những gì bạn cần ngay bây giờ — miễn phí, không cần đăng ký.

Duyệt tất cả công cụ