CSS linear/radial gradient｜Landing không bị bẩn màu — stops & góc【2026】

Hero landing copy-paste từ generator thường gặp một trong ba lỗi: vùng giữa xám đục, vệt màu cứng, hoặc góc lệch khiến chữ khó đọc. Bài này tập trung linear / radial, góc (angle) và color stops — đủ để bạn tự sửa trước khi đưa lên production, không chỉ định nghĩa hàm CSS.

Bài viết này giúp bạn

• Phân biệt linear-gradient và radial-gradient theo tình huống UI
• Hiểu hệ góc 0deg / 90deg / 180deg (và từ khóa to right)
• Đặt color stops để tránh bẩn màu và banding
• Checklist + case study hero / button
• Quy trình nhanh với công cụ chạy trên trình duyệt

---

Gradient CSS là gì (và khi nào dùng)

CSS gradient là hàm vẽ chuyển màu trong background / background-image, không cần file ảnh PNG/JPG. Ưu điểm: nhẹ, scale theo viewport, chỉnh bằng code.

Tình huống	Nên dùng	Lý do ngắn
Hero full-bleed, CTA strip	linear-gradient	Hướng rõ, dễ căn chữ
Nút, badge, progress	linear-gradient (2 màu)	Nhẹ, dễ brand
Spotlight, avatar glow	radial-gradient	Sáng ở tâm, mờ ra mép
Mesh phức tạp nhiều lớp	Nhiều lớp gradient / ảnh	Một dòng 2 màu không đủ

Không thay ảnh sản phẩm thật hay illustration có chi tiết — gradient là nền / accent, không phải “ảnh giả”.

---

Linear vs radial: chọn đúng loại

linear-gradient — đường thẳng

/* Hero nghiêng nhẹ — phổ biến trên landing SaaS */
background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);

/* Từ trên xuống — dễ đọc chữ ở nửa trên */
background: linear-gradient(180deg, #0b1220 0%, #1e293b 100%);

radial-gradient — từ tâm

/* Spotlight phía sau card */
background: radial-gradient(circle at 50% 30%, #38bdf8 0%, #0f172a 65%);

Rule thực dụng: layout / CTA → linear; chiếu sáng / depth giả → radial. Đừng dùng radial full-page nếu chưa kiểm tra contrast chữ ở bốn góc.

---

Góc (angle): vì sao 135deg hay “đúng cảm” hơn 90deg

Theo đặc tả CSS cho linear-gradient:

Góc	Hướng tương đương	Khi nào hợp
0deg	Lên trên (to top)	Ít dùng cho hero full
90deg	Sang phải (to right)	Sidebar, progress ngang
180deg	Xuống dưới (to bottom)	Hero chữ ở trên, nền tối dần
135deg	Chéo xuống-phải	Hero brand — động nhưng không lệch mạnh
270deg	Sang trái	Đối xứng với 90deg

Từ khóa to bottom right ≈ hướng chéo tương tự 135deg, nhưng nên thống nhất một kiểu trong design system (chỉ deg hoặc chỉ to …) để review PR dễ hơn.

Lỗi hay gặp: copy gradient từ Figma export rồi xoay container — góc CSS không đổi theo transform của parent theo cách bạn nghĩ. Luôn xem preview nền + chữ trên breakpoint mobile.

---

Color stops: nguyên nhân “bẩn màu” thật sự

Color stop = một màu + vị trí % (hoặc px) trên đường gradient.

linear-gradient(
  135deg,
  #6366f1 0%,
  #8b5cf6 50%,
  #a78bfa 100%
);

Vì sao ra xám đục ở giữa?

Khi hai màu đối lập trên bánh xe màu (ví dụ đỏ thuần #ff0000 và xanh lá #00ff00) trộn trong không gian RGB, điểm giữa thường gần xám bẩn. Trên landing lớn, mắt người đọc thấy ngay vùng “bùn” giữa hai nửa hero.

Cách xử lý (theo thứ tự nhanh):

1. Chọn 2–3 màu cùng họ hue (teal→teal đậm, indigo→violet) thay vì đỏ–xanh đối cực.
2. Nếu bắt buộc hai màu xa nhau: chèn stop trung gian cùng độ sáng / bão hòa có chủ đích (không phải xám #808080).
3. Giãn stops: 0% / 100% sạch hơn 0% / 8% / 100% (vệt cứng gần mép).
4. Giảm số màu: 2 màu tốt hơn 6 màu “cầu vồng” trên hero B2B.

Banding và vệt cứng

• Stops quá sát → cạnh rõ như sọc.
• Cùng một % cho hai màu khác nhau → hard stop (có chủ đích cho stripe; không hợp fade mềm).
• Nền lớn + màu gần nhau quá mức trên 8-bit display → banding; đôi khi thêm noise nhẹ hoặc stop trung gian giúp hơn là tăng độ tương phản thô.

---

Checklist trước khi ship hero

1. Hue: hai màu có gần nhau trên bánh xe không?
2. Góc: chữ chính nằm trên vùng đủ tối/sáng để đạt contrast?
3. Stops: khoảng cách % có chủ đích (không dồn sát mép)?
4. Mobile: gradient vẫn ổn khi cắt nửa dưới (CTA nằm đâu)?
5. Dark mode: nếu site có theme tối, gradient có bị “neon bẩn” không?
6. Fallback: background-color solid phía sau (nếu gradient fail / print)?

.hero {
  background-color: #0f766e; /* fallback */
  background-image: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
}

---

Case study 1 — Hero landing sạch

Mục tiêu: nền brand teal, chữ trắng, không xám giữa.

.hero-clean {
  background-color: #0d9488;
  background-image: linear-gradient(160deg, #14b8a6 0%, #0f766e 55%, #134e4a 100%);
  color: #f8fafc;
}

• Ba stops cùng họ teal → giữa không xám.
• 160deg hơi dốc → động hơn 180deg nhưng chữ nửa trên vẫn nằm trên vùng sáng vừa phải.
• Fallback solid trước khi khai báo background-image.

Phản ví dụ (tránh):

/* Dễ bẩn: đỏ–cyan đối cực, stops dồn */
background: linear-gradient(90deg, #ff0033 0%, #00ffcc 12%, #3300ff 100%);

---

Case study 2 — Button + radial glow phía sau card

.btn-primary {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
}

.card-stage {
  background:
    radial-gradient(circle at 70% 20%, rgba(56, 189, 248, 0.35) 0%, transparent 45%),
    #0f172a;
}

Linear cho nút (hướng ngang, brand rõ). Radial chỉ làm lớp ánh sáng, màu alpha thấp — không tranh chấp với nội dung card. Đây là pattern phổ biến trên dashboard SaaS outsourcing / freelance portfolio khi cần “depth” mà không tải ảnh.

---

Quy trình nhanh với Kawa Dev Tools

Thay vì đoán % trong DevTools:

1. Mở Tạo Gradient
2. Chọn linear-gradient hoặc radial-gradient
3. Thêm điểm màu (color picker + %)
4. Với linear: chỉnh góc (0–360)
5. Xem preview → copy một dòng CSS vào stylesheet

Công cụ chạy trên trình duyệt, không cần đăng ký — phù hợp chỉnh nhanh trên máy local trước khi commit. Sau khi copy, vẫn nên dán vào layout thật (font, padding, ảnh) vì preview ô nhỏ không thay thế kiểm tra contrast WCAG của chữ.

---

Lỗi thường gặp (và cách sửa)

Triệu chứng	Nguyên nhân hay gặp	Cách sửa
Giữa hero xám đục	Hai màu đối cực RGB	Đổi sang cùng tông hoặc thêm stop trung gian có màu
Vệt cứng gần mép	Stop thứ hai ở 5–15%	Đẩy ra 40–70% hoặc bỏ stop thừa
Chữ không đọc được	Góc/lightness lệch vùng text	Đổi 180deg/160deg, hoặc overlay rgba(0,0,0,.35) dưới chữ
Trông “rẻ” trên mobile	Quá nhiều màu cầu vồng	Giảm còn 2 màu + angle đơn giản
Khác Figma	Export góc / color space khác	So preview CSS trên device thật, đừng tin mắt chỉ trên design file

---

FAQ nhanh trong bài

Các câu hỏi dạng search (“linear khác radial?”, “bẩn màu?”, “0deg là gì?”) nằm ở schema FAQ phía trên — dùng khi bạn cần trả lời đồng đội trong PR mà không mở lại generator.

---

Liên kết liên quan

• Tạo Gradient (linear / radial)
• Danh sách công cụ
• Học thực hành

Tóm lại: đừng chỉ copy hai hex đối cực. Chọn cùng tông, đặt góc có chủ đích, giãn stops, rồi verify chữ trên nền — đó là khác biệt giữa hero “bẩn” và landing sạch mắt.