Công cụ CSS & Thiết kế
Công cụ tạo và máy tính trực quan cho lập trình viên front-end và Webflow.
localMáy tính CSS clamp()Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện…localTạo hiệu ứng hover CSSThiết kế animation hover cho nút, thẻ, liên kết và icon. Chọn một hiệu ứng, thử trên các phần tử khác nhau…localTrình tạo CSS KeyframesTrình chỉnh sửa trực quan cho @keyframes. Thêm keyframe trên timeline, đặt transform, opacity, blur và màu…localTrình tạo animation CSSThiết kế animation CSS trên timeline keyframe thực tế. Bắt đầu từ hơn 50 mẫu có sẵn, xem từng khung hình,…localTạo Cubic BezierTạo đường cong easing bằng cách kéo hai tay cầm và đua nó với các easing chuẩn. Cần chuyển động vật lý?…localTrình tạo CSS LoaderChọn một trong 13 spinner loading chỉ dùng CSS, điều chỉnh kích thước, màu, độ dày và tốc độ, rồi sao chép…localChuyển HEX sang OKLCHDán mã màu HEX và nhận giá trị OKLCH dùng cho CSS. Dùng thanh trượt để tinh chỉnh độ sáng, độ bão hòa và…localChuyển OKLCH sang HEXDán giá trị oklch() để nhận mã HEX tương ứng, cùng với RGB và HSL. Công cụ cũng cho bạn biết khi nào màu…localTạo CSS GradientThiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS…localTạo Box Shadow CSSXếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao…localChuyển đổi PX sang REMChuyển đổi qua lại giữa pixel, rem và em với kích thước font gốc của riêng bạn, hoặc dán cả một stylesheet…localSVG sang JSXDán SVG từ Figma, Illustrator hoặc bộ icon và nhận ngay một React component (JSX hoặc TSX) sẵn sàng sử…localSVG sang CSSDán SVG vào để nhận data URI gọn đã mã hóa URL, cùng sẵn CSS background-image và mask-image có thể đổi màu.localTrình tạo CSS GridĐặt số cột, số hàng và khoảng cách, sau đó kéo qua các ô để tạo các vùng như header, sidebar và main. Bạn…localTrình tạo Border RadiusBo tròn các góc của bất kỳ khung nào: kéo một thanh trượt cho tất cả các góc hoặc đặt từng góc riêng,…localTrình tạo CSS FilterĐiều chỉnh blur, brightness, contrast, saturation, hue, grayscale, sepia, invert và drop shadow trên ảnh…localCông cụ tạo CSS Clip-pathCắt ảnh và phần tử thành hình dạng bất kỳ: chọn một trong 15 hình mẫu có sẵn như tam giác, lục giác, ngôi…localTrình tạo CSS MaskLàm cho ảnh và khối nội dung mờ dần thay vì kết thúc đột ngột: làm mờ một cạnh, trên và dưới, cả bốn cạnh,…localCông cụ tạo tam giác CSSTạo tam giác thuần CSS cho mũi tên tooltip, dấu caret dropdown hoặc bong bóng thoại: chọn một trong 8…localTạo SVG BlobTạo hình blob hữu cơ, mượt mà cho nền hero, avatar và minh họa. Chọn độ phức tạp (số lượng gợn) và độ ngẫu…localTạo sóng SVGThiết kế đường phân cách section dạng sóng cho landing page: thêm hoặc xóa sóng (tối đa 6, mỗi sóng có…localTrình tạo CSS FlexboxXem rõ từng thuộc tính flexbox hoạt động thế nào: chọn hướng, cách xuống dòng, justify-content,…localTạo Type ScaleChọn cỡ chữ gốc và một tỷ lệ như Minor Third, Major Third, Perfect Fourth hay Golden Ratio, bạn sẽ có bộ…localTrình tạo pattern SVGThêm chút họa tiết tinh tế cho section và card bằng mẫu SVG liền mạch: chấm bi, lưới, đường chéo, zigzag,…localTạo Nút CSSThiết kế một nút bấm đẹp ở mọi trạng thái. Bắt đầu từ một mẫu có sẵn — solid, outline, ghost, pill,…localLàm mờ viền ảnh bằng CSSTạo viền ảnh mềm, mờ dần chỉ với một quy tắc CSS — không cần chỉnh sửa ảnh. Làm mờ cả bốn cạnh, một cạnh…localTạo Vignette CSSThêm vignette — lớp mờ tròn, mềm mại quanh các cạnh — cho ảnh, thẻ và phần hero bằng mask radial-gradient.…localMask Hình Ảnh Theo Hình DạngĐặt bất kỳ bức ảnh nào vào trong một hình — ngôi sao, trái tim, lục giác, hình tròn, mũi tên, bong bóng…localTạo đường chia section CSSThêm cạnh nghiêng, cong, mũi tên, sóng, zigzag hoặc răng cưa cho các section của trang landing chỉ với một…localSection nghiêng CSSTạo section nghiêng, xéo hoặc chéo — kiểu trang đích quen thuộc — chỉ với một quy tắc clip-path. Chọn cạnh…localĐường cong chia sectionBo cong mép dưới hoặc mép trên của hero hay section bằng đường cong — lồi, lõm, góc cong, sóng nhẹ hoặc…localCSS Zigzag BorderTạo viền zigzag, răng cưa, viền sóng hoặc bậc thang cho section, card, phiếu giảm giá và thiết kế hóa đơn.…localTạo Hiệu Ứng Hạt RơiThêm tuyết rơi, mưa, sao băng, confetti, cánh hoa, lá thu, trái tim hoặc bong bóng bay lên vào bất kỳ…localHiệu ứng tuyết rơi CSSCho website của bạn tuyết rơi dịp lễ: tuyết mềm hoặc bông tuyết, lất phất nhẹ hay bão tuyết. Sao chép một…localHiệu ứng mưa CSSLàm mưa rơi trên trang hoặc phần hero — từ mưa phùn nhẹ đến mưa rào xiên. Giọt mưa nghiêng theo chiều gió,…localHiệu Ứng Sao Băng CSSCho sao băng lướt qua nền bầu trời đêm, hoặc để các hình ngôi sao trôi xuống và xoay tròn. Điều chỉnh tần…localCSS Hiệu Ứng Pháo GiấyĂn mừng ra mắt sản phẩm, lượt đăng ký hay sinh nhật với pháo giấy rơi nhiều màu, bay lượn và xoay tròn.…localChuyển CSS sang TailwindDán các quy tắc hoặc khai báo CSS và nhận ngay danh sách class Tailwind tương ứng cho từng selector, bao…localTrình tạo GlassmorphismThiết kế thẻ kính mờ với thanh trượt xem trước trực tiếp và sao chép CSS tương thích đa trình duyệt, gồm…localTạo arbitrary value TailwindDán CSS và nhận ngay cú pháp ngoặc vuông của Tailwind đúng ngay lần đầu. Khoảng trắng được đổi thành dấu…localĐổi ViewBox SVGChuẩn hóa icon về viewBox mới (ví dụ 24×24) bằng cách scale lại chính tọa độ bên trong mọi path, circle,…localTìm Icon SVGTìm 70.000+ icon SVG mã nguồn mở — Lucide, Tabler, Heroicons, Phosphor, Bootstrap, Material và nhiều bộ…localChuyển SCSS sang CSSDán mã SCSS hoặc Sass thụt lề để nhận CSS thuần. Mã được biên dịch ngay trong trình duyệt bằng bộ máy Dart…localTrình biên dịch LESS sang CSSDán mã Less và nhận ngay CSS thuần, được biên dịch bởi công cụ Less.js chính thức ngay trên trình duyệt…localHTML sang JSXDán HTML (một đoạn mã, template hoặc icon SVG) và nhận JSX để đưa thẳng vào component React: className,…localTrình tạo Slider & CarouselCấu hình carousel bằng vài cú nhấp chuột thay vì đọc tài liệu: chọn thư viện, thiết lập breakpoint, hiệu…localTrình tạo Swiper SliderCấu hình Swiper 11 bằng trình chỉnh sửa trực quan — breakpoint responsive, hiệu ứng, tự động chạy, kiểu…localTrình tạo Splide SliderTạo carousel Splide dễ truy cập và nhẹ mà không cần đọc tài liệu. Chọn tùy chọn, xem trước ở ba kích thước…localTạo Slider Glide.jsTạo carousel Glide.js tối giản — slider khoảng 7 KB, không phụ thuộc thư viện nào — với breakpoint…localTrình tạo Slick SliderCấu hình carousel jQuery Slick kinh điển: cài đặt responsive, căn giữa, fade, tự động chạy, mũi tên và…localMẫu nút CSSChọn một trong 24 nút CSS có hiệu ứng động: nền đổ màu, viền chạy, phát sáng, lấp lánh và nút 3D lún…localIcon menu hamburgerChọn từ 16 menu hamburger có hoạt ảnh biến thành dấu X, mũi tên hoặc dấu trừ. Đặt kích thước, độ dày, màu…localBộ chọn màuChọn bất kỳ màu nào, hoặc lấy màu từ màn hình, rồi sao chép dưới dạng HEX, RGB, HSL hoặc OKLCH. Xem các…localTrình tạo WebfontBiến font desktop thành webfont nhanh: chuyển sang WOFF2 và WOFF, chỉ giữ các ký tự bạn cần và tải về mọi…localChuyển TTF sang WOFF2Chuyển TTF sang WOFF2, định dạng font nhỏ gọn nhất cho website. Kéo thả file, chuyển đổi và tải về. Cần…localChuyển OTF sang WOFF2Chuyển OTF sang WOFF2 để dùng cho website của bạn. Kéo thả file, chuyển đổi và tải về. Cần CSS hoặc muốn…localChuyển WOFF2 sang TTFChuyển file WOFF2 hoặc WOFF về lại TTF hoặc OTF, định dạng gốc của font. Công cụ này hữu ích khi bạn đã…localFont SubsetterLàm font nhẹ hơn đáng kể bằng cách xóa những ký tự bạn không dùng. Chọn bộ ngôn ngữ hoặc nhập danh sách…
Thiếu công cụ CSS?
Cho chúng tôi biết bạn cần gì — chúng tôi ưu tiên làm các công cụ được yêu cầu nhiều nhất, và hoàn toàn miễn phí.