Tạo gradient CSS online: linear, radial, conic và tải PNG Full HD

Cách tạo gradient CSS online bằng công cụ Tạo gradient CSS của ColorME: nhập điểm màu, chọn kiểu tuyến tính, toả tròn hoặc xoay vòng, chỉnh góc, sao chép mã CSS và tải ảnh PNG 1920×1080. Kèm mã mẫu cho nền hero, thẻ, vòng màu, nút và các giới hạn nên biết.

Trả lời nhanh: để tạo gradient CSS online, mở công cụ Tạo gradient CSS của ColorME, chọn kiểu Tuyến tính, Toả tròn hoặc Xoay vòng, nhập mã màu cho từng điểm màu, kéo thanh Góc rồi bấm Sao chép ở ô CSS. Mã có dạng background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%); và dán thẳng vào file CSS. Cần ảnh nền thì bấm Tải PNG để lấy file 1920×1080. Trang công cụ ghi rõ: "Công cụ miễn phí và chạy ngay trên trình duyệt máy tính hoặc điện thoại", không cần đăng nhập.

Xem nhanh: gõ hai mã màu, ô xem trước và mã CSS đổi ngay. Ảnh chụp màn hình: ColorME.

Gradient CSS là gì, linear, radial và conic khác nhau thế nào?

Gradient là dải chuyển màu mượt từ màu này sang màu khác. Trong CSS, trình duyệt tự vẽ dải màu này từ một dòng mã, không cần file ảnh. Có ba kiểu, và công cụ gọi chúng bằng tên tiếng Việt:

Kiểu (tên trong công cụ)	Màu chuyển thế nào	Hay dùng cho
Tuyến tính linear-gradient()	Theo một đường thẳng, hướng do góc quyết định	Nền hero, nút, banner
Toả tròn radial-gradient()	Từ tâm toả ra thành hình tròn	Vùng sáng sau sản phẩm, thẻ nền tối
Xoay vòng conic-gradient()	Quay quanh tâm như kim đồng hồ	Vòng màu, biểu đồ tròn, viền avatar

Mỗi màu trong dải gọi là một điểm màu (color stop), gồm mã màu và vị trí tính bằng phần trăm: 0% là đầu dải, 100% là cuối dải.

Cách tạo gradient CSS online bằng công cụ của ColorME

Các bước dưới đây được thử trên Chrome máy tính, không đăng nhập. Ví dụ xuyên suốt là một dải tím hồng cho nền hero của trang giới thiệu.

Bước 1: mở công cụ và nhập hai màu đầu tiên

Mở colorme.vn/tools/css-gradient. Công cụ mở sẵn một dải cam hồng (#FF7E5F sang #FEB47B, góc 135°). Bên trái là thẻ Điểm màu, bên phải là ô xem trước và ô CSS.

Giao diện khi mới mở: thanh công cụ ở trên, điểm màu bên trái, xem trước và mã CSS bên phải. Ảnh chụp màn hình: ColorME.

Bấm vào ô mã màu của Màu 1 và gõ #6366F1, Màu 2 gõ #EC4899. Bạn cũng có thể bấm ô màu vuông bên cạnh để chọn bằng bảng màu của trình duyệt. Trong lần thử của chúng tôi, ô này nhận cả rgb(99, 102, 241) và tên màu như teal; mã CSS xuất ra luôn ở dạng HEX (teal thành #008080). Gõ một giá trị không phải màu thì công cụ giữ nguyên màu trước đó. Nếu bạn đang cầm mã RGB, CMYK hay HSL, xem thêm bài đổi mã màu HEX sang RGB, CMYK, HSL.

Bước 2: thêm điểm màu và đặt vị trí

Bấm Thêm màu. Công cụ thêm một điểm ở vị trí 50% với màu pha sẵn từ hai màu hai bên: ở ví dụ này là #A857C5. Chúng tôi đổi nó thành #A855F7 để phần giữa tươi hơn. Bạn cũng có thể bấm thẳng lên thanh màu: khi bấm ở khoảng 25%, công cụ thêm điểm #865EF4 đúng tại 25%.

Thêm điểm màu thứ ba, đổi mã màu rồi kéo góc từ 135° về 90°. Ảnh chụp màn hình: ColorME.

Ô số bên phải mỗi màu là vị trí. Đổi điểm tím từ 50 thành 30 thì màu tím dồn về phía đầu dải và phần hồng chiếm nhiều diện tích hơn. Có thể kéo núm tròn trên thanh màu thay cho gõ số.

Điểm tím ở 30%: mã CSS đổi thành #A855F7 30%. Ảnh chụp màn hình: ColorME.

Bước 3: chọn kiểu và chỉnh góc

Ba nút đầu thanh công cụ đổi kiểu dải màu, các điểm màu giữ nguyên. Với Tuyến tính, thanh Góc chạy từ 0° đến 360°. Theo quy ước của CSS, 0° là màu chạy từ dưới lên trên, 90° từ trái sang phải, 180° từ trên xuống dưới, còn 135° đi chéo từ góc trên bên trái xuống góc dưới bên phải.

Đổi qua ba kiểu với cùng ba màu. Ở kiểu Xoay vòng có một đường cắt cứng vì màu đầu và màu cuối khác nhau. Ảnh chụp màn hình: ColorME.

Chọn Toả tròn thì thanh Góc ẩn đi, vì dải màu toả đều từ tâm. Dải dưới đây gồm xanh da trời #38BDF8 ở tâm, xanh dương #1D4ED8 ở 45% và xanh đen #0F172A ở ngoài cùng, hợp làm nền tối có vùng sáng.

Kiểu Toả tròn: thanh Góc không còn hiện. Ảnh chụp màn hình: ColorME.

Chọn Xoay vòng thì thanh Góc trở thành góc bắt đầu (from 0deg là bắt đầu từ hướng 12 giờ). Mẹo để vòng màu liền mạch: đặt màu ở 0% và 100% giống nhau. Ví dụ dưới dùng năm điểm: cam, hồng, tím, xanh dương rồi quay lại cam.

Kiểu Xoay vòng với màu đầu và màu cuối trùng nhau nên không còn đường cắt. Ảnh chụp màn hình: ColorME.

Bước 4: sao chép mã CSS

Bấm Sao chép ở góc ô CSS, thông báo "Đã sao chép CSS" hiện lên. Với dải tím hồng, đoạn mã chúng tôi nhận được là:

background: #6366F1;
background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);

Dòng thứ nhất là màu đơn dự phòng. Trang công cụ giải thích: "Đó là màu nền dự phòng cho trình duyệt rất cũ không hiểu gradient, giúp giao diện vẫn có màu thay vì trắng trơn." Dòng thứ hai mới là dải màu.

Dải tím hồng hoàn chỉnh và hai dòng mã trong ô CSS. Ảnh chụp màn hình: ColorME.

Bước 5: tải ảnh PNG 1920×1080

Bấm Tải PNG để lưu dải màu thành file colorme-gradient.png kích thước 1920×1080, dùng làm hình nền, nền slide hay ảnh bìa. Ba file chúng tôi tải về nặng khoảng 1,7 đến 2,1 MB. Trang công cụ có ghi thêm: "Nếu bạn đăng nhập, file tải về được lưu vào mục Lịch sử riêng của bạn và tự xoá sau 180 ngày."

File tải về từ nút Tải PNG với dải tuyến tính 135°. Ảnh gốc 1920×1080, ở đây đã thu về 1600 px và đổi sang JPG cho nhẹ bài.

Chưa có ý tưởng? Dùng Mẫu có sẵn hoặc Ngẫu nhiên

Phần Mẫu có sẵn có 11 dải màu: 10 dải hai màu và 1 dải ba màu. Bấm một mẫu là các điểm màu được thay ngay, sau đó bạn chỉnh tiếp như bình thường. Nút Ngẫu nhiên tạo một dải mới mỗi lần bấm và đổi luôn cả góc; kết quả lúc hợp lúc không, nên hãy coi đó là chỗ tìm ý tưởng rồi tự chỉnh lại.

Mẫu thứ tám: xanh ngọc #43CEA2 sang xanh dương #185A9D. Ảnh chụp màn hình: ColorME.

Video: tạo ba kiểu gradient trong chưa đầy một phút

Quay màn hình ở tốc độ thật: chọn mẫu, nhập màu, thêm điểm màu, đổi góc, đổi ba kiểu rồi sao chép CSS. Video: ColorME.

Dán mã vào trang web thật: nền hero, thẻ, vòng màu và nút

Để kiểm tra mã có chạy đúng không, chúng tôi tự dựng một trang mẫu nhỏ và dán nguyên văn bốn đoạn mã sao chép từ công cụ vào bốn thành phần. Trình duyệt nhận đủ cả bốn dải màu, đúng góc và đúng vị trí từng điểm màu.

Trang mẫu do chúng tôi tự dựng để thử mã (không phải giao diện của công cụ). Bốn dải màu đều là mã sao chép từ công cụ.

Mã của từng thành phần:

/* Nền hero: tuyến tính 135° */
.hero {
  background: #6366F1;
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
}
/* Thẻ nền tối có vùng sáng ở tâm: toả tròn */
.card-dark {
  background: #38BDF8;
  background: radial-gradient(circle at center, #38BDF8 0%, #1D4ED8 45%, #0F172A 100%);
}
/* Vòng màu: xoay vòng, bo tròn 50% */
.ring {
  background: #F97316;
  background: conic-gradient(from 0deg at 50% 50%, #F97316 0%, #EC4899 25%, #8B5CF6 50%, #3B82F6 75%, #F97316 100%);
  border-radius: 50%;
}
/* Nút kêu gọi: tuyến tính 90° */
.btn {
  background: #F97316;
  background: linear-gradient(90deg, #F97316 0%, #EC4899 100%);
}

Phần background là mã từ công cụ; tên lớp, border-radius và chú thích là phần chúng tôi viết thêm. Vòng màu trong trang mẫu là một khối tròn nền conic-gradient, bên trong đặt một hình tròn trắng nhỏ hơn.

Dải cam hồng 90° dùng cho nút kêu gọi. Ảnh chụp màn hình: ColorME.

Một lưu ý khi đặt chữ lên nền gradient: mỗi đầu dải có độ sáng khác nhau, nên chữ có thể rõ ở đầu này mà chìm ở đầu kia. Hãy kiểm tra màu chữ với cả màu sáng nhất và màu tối nhất của dải theo bài kiểm tra độ tương phản màu chữ và nền.

Ảnh PNG của kiểu toả tròn và xoay vòng

Nút Tải PNG xuất đúng kiểu đang chọn. Hai ảnh dưới là file tải về của dải toả tròn và dải xoay vòng ở trên.

File tải về của dải toả tròn: sáng ở tâm, tối dần ra bốn góc. Ảnh gốc 1920×1080, đã thu về 1600 px và đổi sang JPG.

File tải về của dải xoay vòng năm điểm màu. Ảnh gốc 1920×1080, đã thu về 1600 px và đổi sang JPG.

Những giới hạn nên biết

• Tối đa 8 điểm màu, tối thiểu 2. Khi đã đủ 8, nút Thêm màu bị khoá và rê chuột vào sẽ thấy ghi "Tối đa 8 màu". Khi chỉ còn 2 điểm, nút xoá bị khoá.
• Vị trí chỉ từ 0 đến 100. Gõ 150 thì mã CSS ghi 100%, gõ số âm thì ghi 0%; khi bạn rời khỏi ô, con số trong ô cũng tự đổi về 100 hoặc 0.
• Toả tròn luôn là hình tròn ở giữa. Mã luôn là circle at center; công cụ không có chỗ đổi tâm hay đổi sang hình elip. Kiểu Xoay vòng cũng luôn đặt tâm ở 50% 50%. Muốn lệch tâm, bạn sửa tay trong mã, ví dụ đổi at center thành at 30% 20%.
• Dòng màu dự phòng lấy theo màu đứng đầu dải, tức điểm có vị trí nhỏ nhất, không phụ thuộc thứ tự trong danh sách. Khi chúng tôi đưa Màu 1 về vị trí 100% và Màu 2 về 0%, dòng dự phòng đổi sang Màu 2.
• Ảnh PNG chỉ có một cỡ 1920×1080. Cần tỉ lệ khác thì cắt lại bằng phần mềm chỉnh ảnh.
• Mỗi lần mở trang, công cụ bắt đầu lại từ dải mặc định trong các lần thử của chúng tôi. Hãy sao chép mã CSS trước khi đóng tab.

Về trình duyệt, trang công cụ ghi: "linear-gradient và radial-gradient chạy trên mọi trình duyệt hiện đại. conic-gradient chạy trên Chrome, Safari, Firefox và Edge bản mới."

Dùng trên điện thoại

Ở màn hình rộng 390 px, các phần xếp thành một cột: thanh công cụ, điểm màu, mẫu có sẵn, rồi tới ô xem trước và ô CSS. Trang không bị trượt ngang. Bạn cần cuộn xuống mới thấy ô xem trước, nên nhìn thanh màu ngay trên danh sách điểm màu để ước lượng trong lúc chỉnh.

Trên điện thoại: thanh công cụ, điểm màu và mẫu có sẵn. Ảnh chụp ở chế độ giả lập màn hình 390 px của Chrome.

Cuộn xuống để thấy ô xem trước và mã CSS. Ảnh chụp ở chế độ giả lập màn hình 390 px của Chrome.

Chúng tôi chưa thử những gì

• Điện thoại thật: phần điện thoại được thử bằng chế độ giả lập 390 px trên Chrome máy tính, chưa thử kéo núm màu bằng ngón tay.
• Safari, Firefox và Edge: mọi lần thử đều trên Chrome.
• Khi đã đăng nhập: chúng tôi chỉ thử ở trạng thái chưa đăng nhập, nên chưa kiểm tra mục Lịch sử.
• Màu trong suốt (mã có alpha như #6366F180 hay rgba()).
• Bảng chọn màu của trình duyệt (ô màu vuông): chúng tôi nhập màu bằng cách gõ mã.
• Dùng dải màu trong Figma hay phần mềm khác.

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

Tạo gradient CSS có cần đăng nhập không?

Trang công cụ trả lời: "Không cần. Công cụ miễn phí và chạy ngay trên trình duyệt máy tính hoặc điện thoại." Chúng tôi làm toàn bộ bài này mà không đăng nhập.

Gradient tôi tạo có được ghi lại không?

Trang công cụ trả lời: "Gradient được tạo ngay trên trình duyệt của bạn. ColorME ghi nhận lượt dùng kèm đoạn mã CSS của gradient (màu, vị trí, góc) khi bạn tạo, sao chép hoặc tải PNG để thống kê, không kèm file ảnh."

Gradient CSS 3 màu viết thế nào?

Liệt kê ba điểm màu kèm vị trí, cách nhau bằng dấu phẩy: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%). Trong công cụ, bấm Thêm màu để có điểm thứ ba; thêm được tới 8 điểm.

Góc trong linear-gradient tính thế nào?

0deg là hướng từ dưới lên, góc tăng theo chiều kim đồng hồ: 90deg là sang phải, 180deg là xuống dưới, 270deg là sang trái. Công cụ mặc định 135deg, tức chéo xuống góc dưới bên phải.

Vì sao conic-gradient có một đường cắt cứng?

Vì dải màu quay đủ một vòng rồi gặp lại điểm bắt đầu. Nếu màu ở 0% khác màu ở 100%, hai màu đó nằm sát nhau và tạo thành đường cắt. Đặt hai màu này giống nhau thì vòng màu liền mạch.

Làm sao để gradient mượt, không bị xỉn ở giữa?

Trang công cụ gợi ý: "Tránh ghép hai màu đối diện trên bánh xe màu vì vùng giữa dễ xỉn; thêm một điểm màu trung gian tươi hơn ở giữa, hoặc chọn các màu gần nhau." Dải tím hồng trong bài làm đúng cách đó: thêm tím #A855F7 vào giữa. Nếu cần lấy màu từ một tấm ảnh để ghép dải, dùng công cụ trích xuất bảng màu.

Nên dùng gradient CSS hay ảnh nền PNG?

Trên website, dùng mã CSS: theo trang công cụ, "gradient CSS được trình duyệt vẽ trực tiếp nên nhẹ hơn nhiều so với dùng ảnh nền", trong khi mỗi file PNG chúng tôi tải về nặng khoảng 2 MB. File PNG hợp với nơi không viết được CSS: slide, ảnh bìa mạng xã hội, hình nền máy tính.