Trình tạo CSS miễn phí
Trình tạo mã CSS trực quan với xem trước trực tiếp. Điều chỉnh các tham số và sao chép CSS sẵn sàng sản xuất ngay lập tức.
Tất cả trình tạo CSS
Trình tạo gradient CSS
Tạo gradient CSS đẹp bằng trình chỉnh sửa hình ảnh. Gradient tuyến tính và hướng tâm với nhiều điểm dừng màu. Sao chép mã CSS ngay lập tức.
Trình tạo CSS Box Shadow
Trình tạo box-shadow CSS trực quan với xem trước trực tiếp. Điều chỉnh độ dịch, mờ, trải rộng, màu sắc và nội dung. Sao chép mã CSS ngay lập tức.
Trình Tạo Bóng Văn Bản CSS
Xây dựng các hiệu ứng text-shadow trực quan và sao chép CSS.
Trình tạo CSS Border Radius
Thiết kế các giá trị CSS border-radius tùy chỉnh bằng trình tạo hình ảnh. Điều chỉnh từng góc riêng lẻ và sao chép CSS ngay lập tức.
Trình tạo CSS Clip-Path
Trình tạo CSS clip-path trực quan miễn phí. Tạo đa giác, vòng tròn, hình elip và đường dẫn clip inset với xem trước trực tiếp và mã CSS tức thì.
Trình tạo Glassmorphism CSS
Tạo các hiệu ứng UI kính mờ thời thượng với xem trước trực tiếp. Tùy chỉnh và sao chép mã CSS.
Trình tạo Cubic Bezier CSS
Tạo các hàm easing cubic-bezier() CSS một cách hình ảnh. Kéo các điểm kiểm soát, xem trước hoạt ảnh và sao chép mã. Miễn phí, không cần đăng ký.
Trình tạo tam giác CSS
Tạo tam giác CSS thuần với hướng, kích thước và màu sắc tùy chỉnh. Xem trước trực tiếp và sao chép CSS sẵn sàng cho sản xuất. Miễn phí, không cần đăng ký.
Trình tạo bộ tải / Spinner CSS
Tạo spinner và hoạt ảnh tải CSS đẹp. Tùy chỉnh màu sắc, kích thước và tốc độ. Sao chép mã CSS thuần. Miễn phí, không cần đăng ký.
Trình tạo mẫu CSS
Tạo mẫu nền CSS đẹp. Chọn từ sọc, chấm, bàn cờ, zigzag và nhiều hơn nữa. Tùy chỉnh màu sắc và kích thước. Sao chép CSS sẵn sàng cho sản xuất. Miễn phí.
Công cụ Chuyển Đổi PX Sang REM Miễn Phí
Chuyển đổi pixel sang rem và ngược lại với kích thước phông chữ cơ sở có thể cấu hình.
Trình giảm thiểu CSS
Trình giảm thiểu CSS trực tuyến miễn phí. Nén CSS bằng cách loại bỏ nhận xét, khoảng trắng và tối ưu hóa giá trị.
Trình tạo hoạt ảnh CSS
Trình tạo hoạt ảnh CSS miễn phí. Xây dựng @keyframes một cách hình ảnh với các điều khiển thời gian, thời lượng, easing và chuyển đổi.
Bộ trực quan hóa mô hình hộp CSS
Bộ trực quan hóa mô hình hộp CSS tương tác. Điều chỉnh lề, đường viền, phần đệm và kích thước nội dung và xem kết quả trực tiếp.
Trình tạo CSS đa cột
Trình tạo bố cục đa cột CSS miễn phí. Xây dựng bố cục kiểu báo chí với xem trước trực tiếp và sao chép mã CSS ngay lập tức.
Trình tạo bộ lọc CSS
Trình tạo bộ lọc CSS miễn phí. Điều chỉnh độ sáng, tương phản, mờ, bão hòa, xoay tint, grayscale, sepia, đảo ngược và độ mờ với xem trước trực tiếp.
Trình tạo nét chữ CSS
Trình tạo nét chữ CSS miễn phí. Tạo văn bản phác thảo, rỗng và có nét với xem trước trực tiếp. Điều chỉnh màu sắc, chiều rộng và bóng.
Trình tạo đường viền gradient CSS
Trình tạo đường viền gradient CSS miễn phí. Tạo đường viền gradient tuyệt vời với xem trước trực tiếp, bán kính có thể điều chỉnh, chiều rộng và màu sắc.
Trình tạo CSS Flexbox
Trình tạo CSS Flexbox trực quan miễn phí. Cấu hình container và mục linh hoạt với xem trước trực tiếp, sau đó sao chép mã CSS được tạo ngay lập tức.
Trình Tạo Gradient Văn Bản CSS
Tạo các hiệu ứng văn bản gradient đẹp. Điều chỉnh màu sắc, góc và xem trước văn bản, sau đó sao chép CSS.
Trình tạo lưới CSS
Trình tạo lưới CSS trực quan miễn phí. Xác định cột, hàng, khoảng cách và căn chỉnh với xem trước trực tiếp, sau đó sao chép mã CSS được tạo.
Bộ chuyển đổi đơn vị CSS
Chuyển đổi giữa các đơn vị CSS: px, rem, em, vw, vh, vmin, vmax, pt, cm, mm, in, %.
Về các trình tạo CSS của chúng tôi
Absolutool bao gồm 12 trình tạo CSS trực quan với xem trước trực tiếp và mã sẵn sàng để sao chép. Mỗi trình tạo cho phép điều chỉnh các giá trị bằng thanh trượt, tay cầm hoặc các điều khiển, và xem kết quả ngay lập tức · không cần kiến thức CSS. Khi kết quả hài lòng bạn, sao chép mã trong một cú nhấp chuột.
Các công cụ CSS của chúng tôi bao gồm các thuộc tính được tìm kiếm nhiều nhất: gradient (tuyến tính và radial), bóng hộp và bóng văn bản, border-radius, clip path (đa giác, hình tròn, hình elip), glassmorphism, đường cong Bézier khối cho các hoạt ảnh, tam giác trong CSS thuần, spinner tải, mẫu nền và chuyển đổi đơn vị. Hoàn hảo cho cả người mới học CSS và các nhà phát triển có kinh nghiệm muốn tinh chỉnh các kiểu của họ một cách trực quan.
Vì Sao Trình Tạo Trực Quan CSS Quan Trọng
Viết CSS bằng tay cho các thuộc tính như linear-gradient(135deg, #667eea 0%, #764ba2 100%), box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06), hoặc clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) đòi hỏi bạn phải thuộc lòng cú pháp và hình dung kết quả trực quan trước khi có thể nhìn thấy nó. Các trình tạo trực quan đảo ngược thứ tự đó: kéo một thanh trượt, chọn một màu, xem bản xem trước cập nhật, rồi sao chép mã được tạo ra. Các công cụ trong danh mục này tạo ra CSS tuân thủ tiêu chuẩn hoạt động trong mọi trình duyệt được phát hành trong năm năm qua, không cú pháp độc quyền, không cần bộ tiền xử lý.
Mỗi trình tạo trên trang này là một trang HTML đơn với một khung xem trước trực tiếp và một bộ điều khiển. Khi bạn điều chỉnh các giá trị, bản xem trước dựng lại theo thời gian thực bằng chính CSS mà trình tạo sẽ sao chép ra. Không có động cơ dựng hình độc quyền nào giả vờ là CSS; những gì bạn thấy chính xác là những gì người dùng của bạn sẽ thấy. Mã được tạo ra dùng cú pháp hiện đại (các thuộc tính tùy chỉnh CSS nơi phù hợp, các thuộc tính logic cho hỗ trợ RTL, OKLCH cho các công cụ màu mới hơn) nhưng lùi về một cách duyên dáng khi bạn cần hỗ trợ trình duyệt cũ hơn, bạn có thể giảm một thiết lập duy nhất cho mỗi công cụ để chuyển sang một biến thể thân thiện với di sản.
Hỗ Trợ Trình Duyệt và Tiền Tố Nhà Cung Cấp
Các đặc tả CSS đã ổn định một cách đáng kể kể từ 2018: chuyển sắc, biến đổi, đổ bóng, hoạt ảnh, flexbox, grid, và clip-path đều hoạt động không cần tiền tố trên mọi trình duyệt lớn (Chrome, Firefox, Safari, Edge). Một nhúm thuộc tính vẫn cần tiền tố hầu hết là thử nghiệm (CSS subgrid trên Safari cũ, các hoạt ảnh điều khiển bằng cuộn). Các trình tạo phát ra CSS tiêu chuẩn không-tiền-tố theo mặc định và bạn có thể dán nó thẳng vào một bảng kiểu. Backdrop-filter (dùng trong trình tạo Glassmorphism) là kẻ tụt hậu phổ biến cuối cùng, nhưng nó đã có mặt trong Firefox 103 ổn định (tháng 7 năm 2022) và Safari đã hỗ trợ nó qua -webkit-backdrop-filter nhiều năm nay. Các dự án hiện đại hiếm khi cần autoprefixer cho các thuộc tính mà các công cụ này bao quát.
Nếu bạn nhắm tới Internet Explorer 11 (một lượng khán giả đang biến mất nhưng có thật với một số mạng nội bộ doanh nghiệp), hầu hết các thuộc tính ở đây không được hỗ trợ. Trình tạo grid lùi về một cách duyên dáng vì IE11 hỗ trợ một cú pháp grid cũ hơn đủ tương tự cho các bố cục đơn giản, nhưng các tính năng nâng cao như subgrid hoặc gap sẽ không dựng được. Với khán giả hiện đại, quy tắc ngón tay cái là “dùng cú pháp tiêu chuẩn mà các công cụ này tạo ra, bỏ qua các tiền tố, và chấp nhận rằng lượng khán giả IE rất nhỏ còn lại sẽ thấy một bố cục đơn giản hóa”. caniuse.com vẫn là tài liệu tham chiếu chuẩn mực cho bất kỳ thuộc tính nào bạn không chắc chắn.
Các Cân Nhắc Về Hiệu Năng
Các hiệu ứng trực quan có thể nhanh chóng trở thành những cái bẫy hiệu năng. Một box-shadow nhiều lớp vẽ một lần mỗi khung hình, vốn rẻ; một filter: blur(20px) trên một tiêu đề dính buộc phải vẽ lại mỗi sự kiện cuộn và làm tụt tốc độ khung hình trên di động. Công cụ Cubic Bezier giúp bạn tinh chỉnh các đường cong hoạt ảnh cho cảm giác đúng; ghép nó với will-change: transform trên phần tử được làm hoạt ảnh giữ cho trình duyệt sẵn sàng kết hợp hoạt ảnh trên GPU thay vì vẽ lại trang. Quy tắc chung: làm hoạt ảnh transform và opacity; mọi thứ khác (width, height, top, left, color) kích hoạt bố cục hoặc vẽ và nên được dùng dè dặt trong hoạt ảnh.
Trình tạo Glassmorphism là nặng nề nhất trong số các hiệu ứng trực quan ở đây vì backdrop-filter: blur(20px) đòi hỏi trình duyệt chụp lại nền, làm mờ nó, và kết hợp lại cho mỗi khung hình mà phần tử kính còn hiển thị. Trên một máy tính để bàn có đồ họa rời điều này là vô hình; trên một điện thoại tầm trung nó có thể làm tụt tốc độ khung hình từ 60fps xuống 30fps. Trình tạo Họa Tiết CSS tạo ra các họa tiết dựa-trên-SVG có chi phí không đáng kể. Các trình tải và hoạt ảnh vẫn mượt miễn là chúng làm hoạt ảnh transform/opacity. Nếu thiết kế của bạn dùng từ ba lớp mờ trở lên xếp chồng, hãy kiểm tra trên một điện thoại tầm trung trước khi xuất xưởng; sự khác biệt giữa “thanh lịch” và “giật cục” có thể là một lớp thừa.
CSS Trong Các Hệ Thống Thiết Kế
Các hệ thống thiết kế hiện đại biểu đạt màu sắc, khoảng cách, và độ nâng dưới dạng thuộc tính tùy chỉnh (biến CSS), rồi xây dựng các kiểu thành phần lên trên. Các trình tạo ở đây xuất ra các giá trị trực tiếp để bạn có thể dán chúng thẳng vào một thành phần, nhưng chúng cũng hữu ích không kém cho việc thu hoạch token hệ thống: sao chép ba hoặc bốn box-shadow có độ sâu tăng dần vào các token --shadow-sm, --shadow-md, --shadow-lg của bạn; sao chép hai chuyển sắc vào --bg-primary và --bg-secondary; sao chép một chuỗi các giá trị border-radius vào --radius-sm và các bạn của nó. Trình tạo giúp bạn đưa ra những quyết định đó một cách trực quan thay vì đoán mò các con số rồi làm mới trang.
Trình Tạo Grid CSS phát ra grid-template-columns và grid-template-rows với các dòng được đặt tên, đó là điều bạn muốn cho một hệ thống. Trình Tạo Flexbox làm điều tương tự cho các bố cục flex. Cả hai tạo ra mã mà bạn có thể bọc trong một lớp hoặc một thành phần Tailwind nguyên trạng. Với các dự án dùng Tailwind, các giá trị thường dịch trực tiếp: một gap 1rem trở thành gap-4, một border radius 0,5rem trở thành rounded-md. Với các dự án không-Tailwind, các biến CSS thô thường chính xác là những gì bạn muốn trong tệp hệ thống thiết kế. Bước lựa chọn trực quan là phần bạn không thể tự động hóa dễ dàng.
Câu Hỏi Thường Gặp
Các trình tạo CSS này có hoạt động với trình duyệt cũ không?
Cú pháp tiêu chuẩn mà chúng phát ra được hỗ trợ bởi mọi trình duyệt phát hành kể từ 2019, vốn bao phủ hơn 97% người dùng toàn cầu theo dữ liệu StatCounter và caniuse. Với Internet Explorer 11 (khoảng 0,5% lưu lượng toàn cầu, hầu hết là người dùng mạng nội bộ doanh nghiệp), hầu hết các tính năng sẽ không dựng được. Safari hiện đại hỗ trợ backdrop-filter qua tiền tố -webkit-, mà công cụ Glassmorphism phát ra bên cạnh thuộc tính tiêu chuẩn.
Vì sao chuyển sắc của tôi trông bị sọc dải?
Màu 8-bit (256 mức mỗi kênh) không thể biểu diễn sự pha trộn mượt mà giữa hai màu gần nhau trên một quãng dài, bạn sẽ thấy các “dải” thấy được trên một màn hình hiệu chỉnh. Giải pháp: kéo giãn chuyển sắc ít hơn, thêm một điểm dừng màu thứ ba để phá vỡ dải, làm nhiễu chuyển sắc bằng một bộ lọc nhiễu SVG, hoặc dùng phép nội suy chuyển sắc OKLCH (được hỗ trợ trong Chrome và Safari) vốn nội suy trong một không gian đồng đều về mặt tri giác.
Tôi nên dùng keyframe CSS hay transition?
Transition dùng để đi từ một trạng thái sang trạng thái khác (di chuột, nhấp, lấy nét), chúng có tính khai báo và trình duyệt lo phần còn lại. Keyframe dùng cho các hoạt ảnh có nhiều bước hoặc một trình tự xác định (một vòng xoay tải, một chuỗi các lần lộ ra so le). Với một thay đổi trạng thái đơn giản hãy dùng transition; với bất cứ thứ gì nhiều bước hãy dùng keyframe. Các trình tạo Cubic Bezier và Hoạt Ảnh trên trang này bao quát cả hai trường hợp.
Làm sao để một hiệu ứng glassmorphism trông đẹp?
Ba thiết lập quan trọng nhất: một nền bán trong suốt (rgba(255,255,255,0.1) đến 0.3), một backdrop-filter: blur() thực thụ trong khoảng 10-30px, và một viền 1px ở mức alpha bằng 1,5 lần alpha của nền để cho kính một cạnh. Thiếu cả ba, nó trông phẳng lì. Trình tạo Glassmorphism trên trang này tinh chỉnh cả ba cùng nhau và bao gồm bản dự phòng Safari -webkit-backdrop-filter.
Sự khác biệt giữa rem, em, và px là gì?
px là một kích thước tuyệt đối: 1px là một điểm ảnh CSS, mà trình duyệt co giãn thành điểm ảnh vật lý dựa trên tỷ lệ điểm ảnh của thiết bị. em tương đối so với cỡ chữ của phần tử cha, nên 1.5em trên một phần tử con của một phần tử có chữ 16px là 24px. rem tương đối so với cỡ chữ của phần tử html gốc, theo mặc định là 16px, nhưng có thể thay đổi qua cỡ chữ gốc vì khả năng truy cập. Hãy dùng rem cho các kích thước nên tôn trọng mức thu phóng trình duyệt và tùy chọn cỡ chữ của người dùng, dùng px cho các kích thước nên bất biến (viền 1px, cỡ biểu tượng cố định).
Tôi có cần một bộ tiền xử lý CSS để dùng các công cụ này không?
Không. Mỗi trình tạo phát ra CSS tiêu chuẩn hoạt động trực tiếp trong một tệp .css. Các bộ tiền xử lý (Sass, Less, Stylus) hữu ích khi bạn muốn biến, lồng nhau, mixin, hoặc tính toán lúc biên dịch, nhưng CSS hiện đại giờ đã hỗ trợ tự nhiên các thuộc tính tùy chỉnh (biến), lồng nhau, và nhiều tính năng khác từng đòi hỏi một bộ tiền xử lý. Đầu ra của các công cụ này độc lập với bộ tiền xử lý, hãy dán nó vào một tệp Sass hay một tệp CSS thuần như nhau.