Trình tạo hình nền gradient miễn phí

Về các gradient

Các gradient CSS cho phép tạo các chuyển tiếp màu mượt mà mà không cần hình ảnh, điều này giảm kích thước tệp và cải thiện hiệu suất. Công cụ này tạo cả các tệp PNG để sử dụng làm hình nền và mã CSS có thể tái sử dụng trên một trang web.

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

Sự khác biệt giữa các gradient tuyến tính, radial và conic là gì?

Các gradient tuyến tính chảy theo một đường thẳng theo một góc cụ thể. Các gradient radial tỏa ra từ một điểm trung tâm. Các gradient conic xoay quanh một điểm trung tâm như một bánh xe màu. Mỗi loại tạo ra một hiệu ứng trực quan khác nhau.

Tôi có thể sử dụng các gradient CSS trên trang web của mình không?

Có! Các gradient CSS được hỗ trợ bởi tất cả các trình duyệt hiện đại và không yêu cầu hình ảnh. Chúng thích nghi với mọi kích thước, tải nhanh hơn và vẫn rõ nét trên mọi màn hình. Sao chép CSS được tạo bởi công cụ này vào các stylesheet của bạn.

Các độ phân giải tốt nhất theo thiết bị của tôi là gì?

Các màn hình máy tính thường sử dụng 1920×1080, các laptop khác nhau, các màn hình 4K sử dụng 3840×2160, các iPhone 1080×1920 và các iPad 2048×2732. Chọn độ phân giải phù hợp với thiết bị của bạn cho một hình nền hoàn toàn rõ nét.

Gradient trên web, một lịch sử ngắn

Gradient có lịch sử lâu dài trước thời số hóa trong in ấn và phun màu. Từ «gradient» như một dải màu chuyển từ màu này sang màu khác xuất phát trực tiếp từ in thạch bản màu và nghệ thuật áp phích phun màu cuối thế kỷ 19; sinh viên thiết kế Bauhaus đã luyện tập bài tập dải tông màu vào những năm 1920, rất lâu trước khi pixel nào đẩy nó lên màn hình.

Gradient số hóa xuất hiện trong hai khoảnh khắc liền kề ở đầu những năm 1990. Adobe Photoshop 1.0 (tháng 2 năm 1990) ra mắt với công cụ gradient ngay từ ngày đầu, thuật toán «blend» nội suy giữa màu trước và màu nền với gradient tuyến tính và xuyên tâm. Adobe PostScript Level 2 (1991) giới thiệu các mẫu shading như một tính năng ngôn ngữ hạng nhất; trước đó, PostScript Level 1 không có cách nào mô tả gradient nguyên bản và phải giả lập bằng các fill dải màu xám tăng dần. PostScript Level 3 (1997) thêm mesh shading Type 6 (Coons patch) và Type 7 (tensor-product) cung cấp sức mạnh cho mọi gradient in ấn trong ngành tạp chí cuối những năm 1990. Công cụ mesh-gradient của Adobe Illustrator xuất hiện ở phiên bản 8 (1998).

CSS gradient trên web xuất hiện muộn hơn mọi người nhớ. -webkit-gradient() của WebKit ra mắt trong Safari 4 và Chrome 1 năm 2008 với cú pháp riêng khá dài dòng. -moz-linear-gradient() của Mozilla theo sau trong Firefox 3.6 (tháng 1 năm 2010), dùng cú pháp cuối cùng sẽ trở thành chuẩn. linear-gradient() và radial-gradient() không tiền tố đạt W3C Candidate Recommendation vào tháng 4 năm 2012 và được dùng rộng rãi từ khoảng năm 2013. conic-gradient() mới hơn nhiều, Chrome 69 tháng 9 năm 2018 (sau flag), bỏ flag trong Chrome 75 (tháng 6 năm 2019), Firefox 83 (tháng 11 năm 2020). Hiện nó đã Baseline-available trên mọi trình duyệt hiện đại.

Skeuomorphic, rồi phẳng, rồi gradient trở lại

Gradient trở thành ngôn ngữ thị giác của thiết kế web cuối những năm 1990 và đầu 2000, các nút Web 2.0 bóng loáng, vát cạnh, phản chiếu của giao diện Apple Aqua (2000) về cơ bản là các gradient lồng nhau với phần sáng bên trong sắc nét trên nền fade mềm mại. Phong trào thiết kế phẳng hình thành xung quanh Metro của Microsoft (Windows Phone 7, 2010) và iOS 7 của Apple (2013), phản ứng lại chủ nghĩa skeuomorphism nặng gradient bằng cách loại bỏ mọi shadow, bevel và blend khỏi UI. Trong khoảng năm năm (2013-2018), gradient không còn thời thượng.

Con lắc quay trở lại mạnh từ năm 2017 trở đi. Mesh gradient đa màu có animation của Stripe trên trang chủ đã tạo ra khuôn mẫu mà cả ngành SaaS sao chép. Việc tái thiết kế logo Instagram năm 2016 thay thế chiếc máy ảnh phẳng bằng gradient hồng-cam-tím bão hòa (một sự gợi ý có chủ ý về logo nhiếp ảnh những năm 1980). Vào cuối thập kỷ, gradient lại phổ biến khắp nơi, nhưng với từ vựng mới: mesh, blob mờ, OKLCH-smooth, có tính đến khả năng tiếp cận. Tailwind CSS 4 (tháng 1 năm 2025) ra mắt với bộ tiện ích gradient mặc định được tuyển chọn kỹ càng bao gồm cả conic gradient với gợi ý hue-interpolation.

Cú pháp CSS gradient trong một màn hình

Cả ba hàm CSS gradient đều nhận một danh sách điểm dừng màu và một hướng:

• linear-gradient(angle, colors…): angle trong CSS dùng quy ước la bàn: 0deg trỏ lên (màu đầu ở phía dưới), 90deg trỏ phải, 180deg trỏ xuống (mặc định), 270deg trỏ trái. Lưu ý đây là ngược lại với góc cực toán học. Bạn cũng có thể dùng từ khóa: to top right tính góc sao cho đường gradient đi qua đường chéo, không giống với gradient 135° trên hộp không vuông.
• radial-gradient(shape size at position, colors…): màu sắc tỏa ra từ một điểm trung tâm. circle hoặc ellipse; từ khóa kích thước closest-side, farthest-corner; vị trí mặc định là trung tâm.
• conic-gradient(from angle at position, colors…): màu sắc xoay theo chiều kim đồng hồ quanh một trung tâm, như bánh xe màu. Hữu ích cho biểu đồ hình tròn, hiệu ứng quét, và giao diện «biểu đồ vòng». Các biến thể lặp của cả ba (repeating-linear-gradient, v.v.) ghép lặp các điểm dừng màu vô hạn.

Điểm dừng cứng (đặt hai điểm dừng màu cùng phần trăm) tạo ra các dải sắc nét thay vì chuyển sắc mềm mại: linear-gradient(red 0%, red 50%, blue 50%, blue 100%) là hai màu tách biệt, không phải gradient. Hữu ích cho sọc, card nhiều phần màu, hoặc border giả.

Cuộc Cách Mạng OKLCH và Điểm Giữa Xám Bẩn

Một gradient từ đỏ thuần #ff0000 đến xanh lá thuần #00ff00 trong nội suy sRGB mặc định đi qua màu vàng-nâu bão hòa thấp, xỉn màu quanh #7f7f00. Điều này xảy ra vì nội suy tuyến tính sRGB giảm cả kênh R và G ở điểm giữa, và mắt chúng ta cảm nhận điểm giữa tối hơn và ít bão hòa hơn nhiều so với cả hai điểm cuối. Đây là điểm đau cổ điển trong thiết kế web.

CSS Color Module Level 4 thêm các không gian màu đồng đều theo nhận thức và khả năng nội suy gradient trong đó: linear-gradient(in oklch, red, green). OKLCH (và người anh em OKLab), được thiết kế bởi Björn Ottosson vào tháng 12 năm 2020, tách độ sáng, chroma và hue để nội suy dọc theo trục hue đi theo đường ngắn nhất quanh bánh xe màu, giữ nguyên độ bão hòa. Gradient đỏ-sang-xanh lá tương tự trong OKLCH đi qua màu vàng tươi ở điểm giữa.

Quy tắc chung:

• Hai màu cận kề (đỏ sang cam, xanh dương sang tím), sRGB và OKLCH trông tương tự; thường ổn.
• Hai màu bù nhau (đỏ và xanh lá, xanh dương và cam), sRGB tạo ra xám bẩn, OKLCH tạo ra dải hue tươi sáng. OKLCH thắng quyết định.
• Một màu sang trắng hoặc đen: sRGB trông xỉn ở điểm giữa; OKLCH giữ độ sáng cảm nhận thay đổi đều đặn.
• Hai màu ít bão hòa có độ sáng tương tự: sự khác biệt tối thiểu.

Hỗ trợ trình duyệt: interpolation-method cho gradient ra mắt trong Safari 16.2 (tháng 12 năm 2022), Chrome 111 (tháng 3 năm 2023), và Firefox 113 (tháng 5 năm 2023), nay là Baseline Widely Available.

Cài đặt trước độ phân giải) chọn đúng số pixel

Hình nền nhỏ hơn màn hình sẽ bị kéo giãn và trông mờ; hình quá lớn lãng phí dung lượng và bộ nhớ. Các kích thước phổ biến năm 2026:

Độ phân giải	Tên phổ biến	Thiết bị
1920×1080	Full HD / 1080p	Laptop và máy tính để bàn phổ biến nhất năm 2026
2560×1440	QHD / 2K	Màn hình gaming và creator phổ cập
3440×1440	UWQHD siêu rộng	Màn hình ultrawide cong 21:9
3840×2160	4K / UHD	Máy tính để bàn cao cấp và Apple Studio Display
5120×2880	5K	Apple iMac Retina, Studio Display
1080×1920	Điện thoại portrait	Android FHD cơ bản
1170×2532 / 1290×2796	iPhone đời mới	Dòng iPhone 13-16 tỷ lệ 19,5:9
2048×2732	iPad Pro 12,9 inch	Máy tính bảng 4:3

Khi nào bạn dùng nó

• Hình nền thiết bị cá nhân: màn hình desktop, màn hình khóa, màn hình chính, thậm chí nền mặt đồng hồ thông minh.
• Hình nền ảo cho hội nghị video. Gradient đặc dễ cho tính năng tách phông Zoom/Teams/Meet hơn ảnh chụp bận rộn, chúng giảm artefact «hào quang» xung quanh người nói.
• Header mạng xã hội: Twitter/X 1500×500, LinkedIn 1584×396, banner kênh YouTube 2560×1440 (có lưu ý safe-area), Instagram Stories 1080×1920.
• Gradient nhận diện thương hiệu. Mesh tím-xanh của Stripe, hồng-cam-tím của Instagram, xanh lime-sang-xanh đậm của Spotify, tím-hồng của Slack, tất cả là ví dụ thực tế về gradient định nghĩa thương hiệu.
• Phần hero trên trang web) dù CSS gradient thường được áp dụng trực tiếp qua background-image, PNG fallback hữu ích cho email (hầu hết email client vẫn không render CSS gradient đáng tin cậy) và cho trình duyệt không có nội suy oklch.
• Trạng thái rỗng, skeleton loading, card dashboard: các bề mặt UI được hưởng lợi từ sự thú vị thị giác nhẹ nhàng mà không gây mất tập trung.
• In ấn và quà lưu niệm. Hình nền 4K ở 300 DPI bao phủ khoảng poster 12 × 18 inch.

Khả Năng Tiếp Cận, Văn Bản Trên Gradient

Lỗi thực tế phổ biến nhất với gradient nền là không đảm bảo độ tương phản cho văn bản chồng lên. WCAG 2.2 SC 1.4.3 (Tương phản Tối thiểu, Cấp AA) yêu cầu 4,5:1 cho văn bản thân bài và 3:1 cho văn bản lớn (18 pt thông thường hoặc 14 pt đậm). WCAG được viết cho nền đặc; với gradient, tỷ lệ tương phản tại mỗi điểm dưới văn bản quan trọng, điểm xấu nhất mới là điều tính.

Giải pháp thực tế khi đặt văn bản trên gradient: thêm màn che nửa trong suốt màu đen hoặc trắng dưới văn bản, giới hạn gradient dưới văn bản trong một khoảng độ sáng hẹp, hoặc dùng text-shadow mạnh làm fallback. Gradient dọc (trên tối, dưới sáng) thường thân thiện với văn bản hơn đường chéo, văn bản chạy từ trái sang phải gặp độ sáng nền không đổi trên mỗi dòng; gradient 45° dưới khối văn bản dài buộc mỗi dòng phải đi qua toàn bộ dải độ sáng, làm cho độ tương phản nhất quán khó hơn nhiều.

Câu Hỏi Thêm

Tại sao gradient của tôi có các dải màu thấy được?

Hai nguyên nhân thường gặp. Thứ nhất, nén JPEG: mã hóa DCT-based của JPEG tạo ra «blocking» thấy được trên các dải tông màu mịn, đặc biệt ở vùng ít bão hòa. Hãy lưu dưới dạng PNG hoặc WebP-lossless thay thế. Thứ hai, độ sâu màu 8-bit mỗi kênh: gradient 8-bit giữa hai màu gần nhau chỉ có vài bước tông màu riêng biệt và mắt đôi khi có thể phân biệt chúng. Thêm lớp nhiễu/dither nhỏ (1-2% noise) phá vỡ các dải bằng cách thêm biến thiên tự nhiên; nhiều công cụ thiết kế cao cấp tự động làm điều này.

Nên dùng linear, radial hay conic cho hình nền desktop?

Với hầu hết hình nền, linear ở góc chéo nhẹ (khoảng 135°) hoặc radial tâm ngoài màn hình trông đẹp nhất, chúng tạo ra sự bất đối xứng mà không gây mất tập trung. Conic gradient ấn tượng nhưng mang cảm giác «được thiết kế bởi nhà thiết kế» hơn là backdrop ambient, vì vậy phù hợp hơn cho các bề mặt accent (bìa album, bài đăng mạng xã hội) hơn là hình nền bạn nhìn trong tám tiếng mỗi ngày. Mesh gradient (nhiều radial gradient chồng lên nhau) là giao diện hiện đại nhất nhưng đòi hỏi thư viện JS hoặc hình ảnh đã tạo sẵn, một radial gradient đơn với hai màu bù nhau ở độ bão hòa thấp là một xấp xỉ tốt.

Tổ hợp màu nào trông đẹp nhất?

Ba mẫu đáng tin cậy: cận kề (hai màu liền nhau trên bánh xe (tím sang xanh dương, cam sang đỏ) trông bình yên và hài hòa; đơn sắc (cùng hue, thay đổi độ sáng) giao diện xanh Stripe cổ điển) trông như thương hiệu và tinh tế; bộ ba cộng OKLCH (ba hoặc bốn màu cách đều nhau nội suy trong không gian nhận thức) tạo ra giao diện Stripe / Instagram hiện đại. Tránh hai màu bù nhau thuần túy (đỏ/xanh lá, xanh dương/cam) trừ khi bạn đang dùng nội suy oklch(), sRGB sẽ cho điểm giữa bẩn.

Có gì được gửi đến máy chủ không?

Không. Gradient được render thành <canvas> trong trình duyệt của bạn, PNG được xuất qua canvas.toDataURL(), và chuỗi CSS được tạo bởi JavaScript cục bộ. Không có gì về lựa chọn màu, kích thước hay hình ảnh kết quả rời khỏi trang.

Công cụ liên quan