Trình Tạo CSS

Q: CSS xuất ra dùng ngay được không?

Được — đoạn mã là thuộc tính CSS chuẩn, dán vào quy tắc CSS của phần tử là chạy. Cubic-bezier dùng kèm transition/animation.

Q: Có hỗ trợ nhiều lớp bóng không?

Bản này tạo một bóng mỗi lần; bạn có thể ghép nhiều box-shadow bằng dấu phẩy nếu cần.

Q: Sao phần Tailwind đôi khi báo không có class phù hợp?

Một số giá trị không có class Tailwind (ví dụ viền groove, filter: opacity(), khoảng max-width có dấu <= hay transform 3D). Khi đó công cụ để bạn dùng CSS thay vì sinh class tuỳ biến dễ xung đột với class khác. Vùng grid và @keyframes luôn cần một ít CSS.

Q: Giá trị clamp() được tính thế nào?

hệ số góc = (cỡ lớn nhất − cỡ nhỏ nhất) / (màn hình lớn nhất − màn hình nhỏ nhất); tung độ gốc = cỡ nhỏ nhất − hệ số góc × màn hình nhỏ nhất; giá trị ưu tiên = tung độ gốc (đổi sang rem) + hệ số góc × 100vw. Với 16px ở 320px đến 24px ở 1280px và cỡ chữ gốc 16px, kết quả là clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).

Q: Vì sao thứ tự transform cố định?

Các hàm transform áp dụng từ phải sang trái, nên rotate rồi translate sẽ dịch theo trục đã xoay. Công cụ luôn viết translate → rotate → scale → skew — đúng với điều đa số người dùng mong đợi và khớp với Tailwind v4.

Tạo mã CSS trực quan — kéo thanh trượt, xem trước ngay và sao chép CSS dán thẳng vào dự án. Ngoài các hiệu ứng quen thuộc còn có sân chơi flexbox và grid, trình tạo animation keyframes, transform, máy tính cỡ chữ co giãn clamp() và đoạn mã media / container query. Tất cả chạy trên trình duyệt.

Các bước

Chọn nhóm ở thanh trên — Hiệu ứng, Viền & hình, Bố cục, Chuyển động hoặc Responsive — rồi chọn công cụ ở thanh thứ hai.
Chỉnh các thông số bằng thanh trượt, danh sách chọn và ô chọn màu; khung bên phải xem trước trực tiếp.
Bấm Sao chép CSS để lấy đoạn mã và dán vào file CSS của bạn. Với các công cụ có class Tailwind tương ứng, chuyển sang Tailwind rồi bấm Sao chép Tailwind.

Từng công cụ

Box Shadow: đổ bóng cho khối — chỉnh độ lệch ngang/dọc, độ nhoè, độ toả, màu, độ mờ và bật inset (bóng bên trong).
Text Shadow: đổ bóng cho chữ.
Glassmorphism: hiệu ứng kính mờ (nền trong + backdrop-filter: blur).
Filter: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia và drop-shadow trên cảnh mẫu — chuyển giữa filter và backdrop-filter, hoặc bắt đầu từ mẫu có sẵn.
Border Radius: bo góc — đồng đều 4 góc hoặc chỉnh riêng từng góc.
Viền & Outline: độ dày, kiểu và màu cho từng cạnh (tắt Giống nhau 4 cạnh để chỉnh riêng một cạnh), cùng outline và outline-offset. Khi 4 cạnh giống nhau, mã gộp thành một dòng border.
Tam giác: mũi tên và đầu tooltip theo 8 hướng, vẽ bằng Mẹo dùng border hoặc clip-path.
Thanh cuộn: màu con trượt, màu khi rê chuột, màu rãnh, kích thước và bo góc kiểu WebKit, cùng cặp thuộc tính chuẩn scrollbar-width / scrollbar-color.
Flexbox: thuộc tính khung chứa (direction, wrap, justify-content, align-items, align-content, khoảng cách) và 3–8 phần tử, mỗi phần tử có flex-grow, flex-shrink, flex-basis, align-self và order riêng. Bấm vào phần tử trong khung xem trước để chọn.
Grid: khai báo cột và hàng bằng fr, px, %, auto, min/max-content hoặc minmax(), hoặc cột repeat(auto-fill / auto-fit, minmax()); khoảng cách; vị trí phần tử theo điểm bắt đầu và số ô chiếm. Bật Vùng đặt tên, gõ tên vào Tên vùng để tô rồi bấm vào các ô để tạo grid-template-areas; Ô trống (.) dùng để xoá ô.
Cubic Bezier: đường cong easing cho animation — kéo 2 điểm điều khiển hoặc chọn nhanh ease / ease-in / ease-out / ease-in-out.
Keyframes: các mốc keyframe từ 0–100% với translate, rotate, scale, skew, opacity và màu nền; thời lượng, hàm thời gian, độ trễ, số lần lặp, hướng và fill-mode; chạy, tạm dừng, chạy lại. Mẫu có sẵn gồm fade-in, slide-up, bounce, pulse, shake và spin. Chọn Lấy từ tab Cubic Bezier làm hàm thời gian để dùng lại đường cong bạn đã chỉnh.
Transform: translate, rotate, scale, skew (2D) và perspective, rotateX, rotateY (3D), kèm transform-origin. Khung nét đứt là vị trí ban đầu.
Co giãn clamp(): nhập cỡ nhỏ nhất và lớn nhất ứng với độ rộng màn hình nhỏ nhất và lớn nhất để ra clamp(min, ưu tiên, max), có hiển thị từng bước tính và thanh trượt giả lập độ rộng màn hình. Dùng được cho cỡ chữ và khoảng cách (padding, margin, gap).
Media / Container query: @media với Breakpoint có sẵn (Tailwind hoặc Bootstrap), giá trị nhỏ nhất/lớn nhất theo cú pháp khoảng (width >= 768px) hoặc kiểu cũ min-width, orientation, prefers-color-scheme, prefers-reduced-motion, hover và pointer. @container tạo khai báo container và truy vấn tương ứng, có khung demo kéo giãn được.

Mẹo

Bóng tinh tế: độ nhoè lớn + độ mờ thấp trông nhẹ nhàng, chuyên nghiệp hơn bóng đậm.
Glassmorphism và backdrop-filter chỉ thấy rõ khi có nền phía sau (ảnh hoặc gradient).
Ở Co giãn clamp(), đặt Cỡ chữ gốc (px) đúng với trang của bạn nếu có đổi cỡ chữ gốc — giá trị rem phụ thuộc vào nó. Nếu cỡ lớn nhất gấp hơn 2,5 lần cỡ nhỏ nhất, công cụ sẽ cảnh báo chữ có thể không phóng tới 200% khi zoom.
Vùng đặt tên trong grid phải là hình chữ nhật: hình chữ L hoặc một tên nằm rời ở hai nơi sẽ bị báo lỗi.
Nên giữ Thêm quy tắc prefers-reduced-motion để người đã bật giảm chuyển động trong hệ điều hành không phải xem animation.
Muốn khoảng dừng ngay trước breakpoint kế tiếp, giữ phép so sánh giá trị lớn nhất là < — cú pháp cũ khi đó ghi dạng 767.98px để các khoảng không chồng lên nhau.
Khớp với cửa sổ hiện tại cho biết media query có khớp với trình duyệt bạn đang dùng hay không; đổi kích thước cửa sổ để thử.

Câu hỏi thường gặp

CSS xuất ra dùng ngay được không?

Được — đoạn mã là thuộc tính CSS chuẩn, dán vào quy tắc CSS của phần tử là chạy. Cubic-bezier dùng kèm transition/animation.

Có hỗ trợ nhiều lớp bóng không?

Bản này tạo một bóng mỗi lần; bạn có thể ghép nhiều box-shadow bằng dấu phẩy nếu cần.

Sao phần Tailwind đôi khi báo không có class phù hợp?

Một số giá trị không có class Tailwind (ví dụ viền groove, filter: opacity(), khoảng max-width có dấu <= hay transform 3D). Khi đó công cụ để bạn dùng CSS thay vì sinh class tuỳ biến dễ xung đột với class khác. Vùng grid và @keyframes luôn cần một ít CSS.

Giá trị clamp() được tính thế nào?

hệ số góc = (cỡ lớn nhất − cỡ nhỏ nhất) / (màn hình lớn nhất − màn hình nhỏ nhất); tung độ gốc = cỡ nhỏ nhất − hệ số góc × màn hình nhỏ nhất; giá trị ưu tiên = tung độ gốc (đổi sang rem) + hệ số góc × 100vw. Với 16px ở 320px đến 24px ở 1280px và cỡ chữ gốc 16px, kết quả là clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).

Vì sao thứ tự transform cố định?

Các hàm transform áp dụng từ phải sang trái, nên rotate rồi translate sẽ dịch theo trục đã xoay. Công cụ luôn viết translate → rotate → scale → skew — đúng với điều đa số người dùng mong đợi và khớp với Tailwind v4.

Hướng dẫn liên quan — Thiết Kế & Mockup

Trình Tạo CSS

Các bước

Chọn nhóm ở thanh trên — Hiệu ứng, Viền & hình, Bố cục, Chuyển động hoặc Responsive — rồi chọn công cụ ở thanh thứ hai.

Chỉnh các thông số bằng thanh trượt, danh sách chọn và ô chọn màu; khung bên phải xem trước trực tiếp.

Bấm Sao chép CSS để lấy đoạn mã và dán vào file CSS của bạn. Với các công cụ có class Tailwind tương ứng, chuyển sang Tailwind rồi bấm Sao chép Tailwind.

Từng công cụ

Box Shadow: đổ bóng cho khối — chỉnh độ lệch ngang/dọc, độ nhoè, độ toả, màu, độ mờ và bật inset (bóng bên trong).

Text Shadow: đổ bóng cho chữ.

Glassmorphism: hiệu ứng kính mờ (nền trong + backdrop-filter: blur).

Filter: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia và drop-shadow trên cảnh mẫu — chuyển giữa filter và backdrop-filter, hoặc bắt đầu từ mẫu có sẵn.

Border Radius: bo góc — đồng đều 4 góc hoặc chỉnh riêng từng góc.

Viền & Outline: độ dày, kiểu và màu cho từng cạnh (tắt Giống nhau 4 cạnh để chỉnh riêng một cạnh), cùng outline và outline-offset. Khi 4 cạnh giống nhau, mã gộp thành một dòng border.

Tam giác: mũi tên và đầu tooltip theo 8 hướng, vẽ bằng Mẹo dùng border hoặc clip-path.

Thanh cuộn: màu con trượt, màu khi rê chuột, màu rãnh, kích thước và bo góc kiểu WebKit, cùng cặp thuộc tính chuẩn scrollbar-width / scrollbar-color.

Flexbox: thuộc tính khung chứa (direction, wrap, justify-content, align-items, align-content, khoảng cách) và 3–8 phần tử, mỗi phần tử có flex-grow, flex-shrink, flex-basis, align-self và order riêng. Bấm vào phần tử trong khung xem trước để chọn.

Grid: khai báo cột và hàng bằng fr, px, %, auto, min/max-content hoặc minmax(), hoặc cột repeat(auto-fill / auto-fit, minmax()); khoảng cách; vị trí phần tử theo điểm bắt đầu và số ô chiếm. Bật Vùng đặt tên, gõ tên vào Tên vùng để tô rồi bấm vào các ô để tạo grid-template-areas; Ô trống (.) dùng để xoá ô.

Cubic Bezier: đường cong easing cho animation — kéo 2 điểm điều khiển hoặc chọn nhanh ease / ease-in / ease-out / ease-in-out.

Keyframes: các mốc keyframe từ 0–100% với translate, rotate, scale, skew, opacity và màu nền; thời lượng, hàm thời gian, độ trễ, số lần lặp, hướng và fill-mode; chạy, tạm dừng, chạy lại. Mẫu có sẵn gồm fade-in, slide-up, bounce, pulse, shake và spin. Chọn Lấy từ tab Cubic Bezier làm hàm thời gian để dùng lại đường cong bạn đã chỉnh.

Transform: translate, rotate, scale, skew (2D) và perspective, rotateX, rotateY (3D), kèm transform-origin. Khung nét đứt là vị trí ban đầu.

Co giãn clamp(): nhập cỡ nhỏ nhất và lớn nhất ứng với độ rộng màn hình nhỏ nhất và lớn nhất để ra clamp(min, ưu tiên, max), có hiển thị từng bước tính và thanh trượt giả lập độ rộng màn hình. Dùng được cho cỡ chữ và khoảng cách (padding, margin, gap).

Media / Container query: @media với Breakpoint có sẵn (Tailwind hoặc Bootstrap), giá trị nhỏ nhất/lớn nhất theo cú pháp khoảng (width >= 768px) hoặc kiểu cũ min-width, orientation, prefers-color-scheme, prefers-reduced-motion, hover và pointer. @container tạo khai báo container và truy vấn tương ứng, có khung demo kéo giãn được.

Mẹo

Bóng tinh tế: độ nhoè lớn + độ mờ thấp trông nhẹ nhàng, chuyên nghiệp hơn bóng đậm.

Glassmorphism và backdrop-filter chỉ thấy rõ khi có nền phía sau (ảnh hoặc gradient).

Ở Co giãn clamp(), đặt Cỡ chữ gốc (px) đúng với trang của bạn nếu có đổi cỡ chữ gốc — giá trị rem phụ thuộc vào nó. Nếu cỡ lớn nhất gấp hơn 2,5 lần cỡ nhỏ nhất, công cụ sẽ cảnh báo chữ có thể không phóng tới 200% khi zoom.

Vùng đặt tên trong grid phải là hình chữ nhật: hình chữ L hoặc một tên nằm rời ở hai nơi sẽ bị báo lỗi.

Nên giữ Thêm quy tắc prefers-reduced-motion để người đã bật giảm chuyển động trong hệ điều hành không phải xem animation.

Muốn khoảng dừng ngay trước breakpoint kế tiếp, giữ phép so sánh giá trị lớn nhất là < — cú pháp cũ khi đó ghi dạng 767.98px để các khoảng không chồng lên nhau.

Khớp với cửa sổ hiện tại cho biết media query có khớp với trình duyệt bạn đang dùng hay không; đổi kích thước cửa sổ để thử.