Công cụ CSS

Tạo mã CSS gọn gàng, sẵn sàng sao chép và dán một cách trực quan với những công cụ miễn phí này — đổ bóng hộp, gradient, bo góc, flexbox, grid, hoạt ảnh, clip-path và bộ lọc — với bản xem trước trực tiếp khi bạn tinh chỉnh từng giá trị.

Đổ bóng, bộ lọc và hoàn thiện

Trình tạo CSS Box Shadow

Thiết kế box-shadow trực quan với xem trước trực tiếp và sao chép CSS.

Trình tạo CSS Text Shadow

Thiết kế text-shadow với xem trước trực tiếp và sao chép CSS.

Trình tạo Neumorphism

Tạo bóng đổ neumorphic soft-UI với xem trước trực tiếp và sao chép.

Trình tạo Glassmorphism

Tạo CSS thẻ kính mờ với độ mờ (blur), độ trong suốt, độ bão hòa và một màu phủ.

Trình tạo CSS Filter

Kết hợp các bộ lọc CSS bằng thanh trượt với xem trước trực tiếp, rồi sao chép.

Viền chữ CSS

Thêm đường viền hoặc nét cho chữ và sao chép CSS.

Bộ tạo kiểu thanh cuộn CSS

Tạo kiểu thanh cuộn tùy chỉnh và sao chép CSS ::-webkit-scrollbar.

Hình dạng, chuyển sắc và nền

Trình tạo CSS Border Radius

Điều chỉnh bán kính từng góc với xem trước trực tiếp và sao chép CSS.

Trình tạo CSS clip-path

Cắt một phần tử thành các hình dạng phổ biến và sao chép CSS clip-path.

Trình tạo CSS Triangle

Tạo hình tam giác thuần CSS theo mọi hướng và sao chép CSS.

Trình tạo CSS Gradient

Tạo gradient linear hoặc radial với xem trước trực tiếp và sao chép CSS.

Họa tiết nền CSS

Tạo họa tiết nền CSS với hai màu và sao chép nó.

Bố cục và thiết kế đáp ứng

Sân chơi CSS Flexbox

Thử nghiệm các thuộc tính flexbox trên bản xem trước trực tiếp và sao chép CSS được tạo ra.

Trình tạo CSS Grid

Tạo bố cục CSS grid với số cột, số hàng và khoảng cách có thể điều chỉnh, kèm bản xem trước trực tiếp.

Trình tạo CSS Media Query

Tạo @media query responsive với các mẫu có sẵn và sao chép nó.

Hộp tỉ lệ khung hình CSS

Tạo hộp tỉ lệ khung hình responsive kèm phương án padding dự phòng.

Bố cục nhiều cột CSS

Tạo bố cục văn bản nhiều cột CSS kèm đường kẻ phân chia.

Chuyển động, biến đổi và hoạt ảnh

Trình tạo CSS Transform

Kết hợp translate, rotate, scale và skew thành một CSS transform duy nhất với bản xem trước trực tiếp.

Trình tạo CSS Animation

Tạo hiệu ứng keyframe, xem trước trực tiếp và sao chép CSS.

Trình tạo CSS Easing

Chọn hoặc tự dựng một easing cubic-bezier và phát lại trên một chấm xem trước có chuyển động.

Trình tạo CSS Spinner

Tạo spinner loading thuần CSS và sao chép CSS.

Không có công cụ nào phù hợp.

Khám phá các danh mục khác