Trình Tạo CSS Gradient

CSS Gradient Là Gì?

Trình tạo CSS gradient là công cụ trực quan giúp bạn xây dựng hiệu ứng chuyển màu mượt mà mà không cần viết cú pháp gradient thủ công. Trong CSS, gradient là sự chuyển tiếp mượt mà giữa hai màu trở lên, được trình duyệt hiển thị trực tiếp mà không cần tệp hình ảnh. Đặc tả CSS Image Module Level 4 định nghĩa các hàm gradient là một loại giá trị hình ảnh, nghĩa là chúng có thể xuất hiện ở bất kỳ nơi nào chấp nhận giá trị background-image, list-style-image, hoặc border-image. Vì trình duyệt hiển thị gradient tại thời điểm render, chúng có thể thu phóng ở bất kỳ độ phân giải nào và không bao giờ tạo ra hiện tượng mờ trên màn hình high-DPI. Sử dụng trình tạo CSS gradient giúp tiết kiệm thời gian và giảm thiểu việc phải đoán mò — bạn điều chỉnh màu sắc và vị trí trực quan, rồi sao chép quy tắc CSS hoàn chỉnh.

CSS hỗ trợ ba hình dạng gradient chính: tuyến tính (dọc theo một đường thẳng), hướng tâm (tỏa ra từ một điểm trung tâm), và conic (quét xung quanh một điểm trung tâm). Mỗi hình dạng chấp nhận danh sách điểm dừng màu, nơi bạn chỉ định màu sắc và tùy chọn vị trí (phần trăm hoặc độ dài). Trình duyệt nội suy màu sắc giữa các điểm dừng sử dụng không gian màu sRGB theo mặc định, mặc dù CSS Color Level 4 cho phép chỉ định các không gian màu khác như oklch và lab để có sự chuyển tiếp trực quan mượt mà hơn.

Gradient thay thế nền ảnh cho hầu hết các mục đích trang trí trên web. Một quy tắc CSS duy nhất tạo ra những gì trước đây yêu cầu xuất từ Photoshop và một yêu cầu HTTP. Chúng độc lập với độ phân giải, không tốn băng thông ngoài bản thân CSS, và có thể được tạo hiệu ứng hoặc chuyển đổi bằng các thuộc tính CSS tiêu chuẩn. Cú pháp gradient đã ổn định trên tất cả các trình duyệt lớn từ năm 2013, và dạng không có tiền tố nhà sản xuất hoạt động trên Chrome, Firefox, Safari, và Edge mà không cần fallback.

Tại Sao Dùng Trình Tạo CSS Gradient Này?

Viết cú pháp gradient thủ công đồng nghĩa với việc phải đoán vị trí điểm dừng, kiểm tra giá trị góc, và liên tục tải lại trang để xem kết quả. Công cụ xây dựng trực quan cho phép bạn thấy gradient ngay khi tạo, điều chỉnh điểm dừng bằng cách kéo thả, và sao chép CSS hoàn chỉnh khi ưng ý.

Các Trường Hợp Sử Dụng Trình Tạo CSS Gradient

Tài Liệu Tham Khảo Các Loại CSS Gradient

CSS định nghĩa năm hàm gradient. Ba loại chính (linear, radial, conic) mỗi loại đều có biến thể lặp lại tạo ra mẫu lát gạch. repeating-linear-gradient() và repeating-radial-gradient() hữu ích cho nền có sọc và các vòng đồng tâm. Tất cả hàm gradient chấp nhận điểm dừng màu theo bất kỳ định dạng màu CSS nào: HEX, RGB, HSL, tên màu được đặt tên, hoặc oklch. Hỗ trợ trình duyệt cho cả năm hàm thực tế là toàn diện trên Chrome, Firefox, Safari, và Edge — không cần tiền tố nhà sản xuất.

So Sánh Gradient Tuyến Tính vs Hướng Tâm vs Conic

Mỗi loại gradient ánh xạ màu sắc lên hình học theo cách khác nhau. Việc chọn loại phù hợp phụ thuộc vào hiệu ứng trực quan bạn cần, không phải dựa trên sự khác biệt về chất lượng giữa chúng. Đối với hầu hết nền trang và thanh phân cách, gradient tuyến tính là lựa chọn mặc định đúng đắn — nó đơn giản nhất để suy luận và dễ dự đoán nhất trên các phần tử có kích thước khác nhau. Gradient hướng tâm và conic phù hợp hơn cho các hiệu ứng trực quan cụ thể khi hình học tròn hoặc xoay có ý nghĩa thực sự thay vì chỉ trang trí.

Ví Dụ Mã

Các ví dụ về việc tạo và áp dụng CSS gradient theo cách lập trình trong JavaScript, Python, CSS, và Go. Mỗi ví dụ tạo ra chuỗi CSS gradient hợp lệ có thể sử dụng trực tiếp trong stylesheet hoặc inline style.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

Câu Hỏi Thường Gặp