Những công cụ lập trình bạn dùng mỗi ngày, gom lại một chỗ.

Bộ chuyển đổi, bộ định dạng, hàm băm, bộ kiểm tra và những tiện ích nhỏ bạn cứ mở đi mở lại nay nằm chung một nơi thay vì thất lạc khắp các tab.

GitHub

/ Công cụ

■

/ Tìm công cụ

109 công cụ

/ Trình tạo Gradient

Loại Gradient

Góc: 90°

0°90°180°270°360°

Điểm màu

100%

Xem trước Gradient

Mã CSS

Giá trị thuộc tính CSS

Background Image

/ Công cụ đã chọn

■

Trình tạo Gradient - công cụ tạo miễn phí

Tạo gradient CSS đẹp mắt với nhiều điểm dừng màu

■ 01

Gradient CSS là gì?

Gradient CSS tạo các chuyển tiếp mượt mà giữa hai hoặc nhiều màu. Chúng có thể được dùng làm nền, viền và các thuộc tính khác. Gradient được trình duyệt dựng và co giãn hoàn hảo mà không bị vỡ hạt.

■ 02

Nó hoạt động như thế nào?

Gradient hoạt động bằng cách định nghĩa các điểm dừng màu tại những vị trí cụ thể dọc theo một đường. Gradient tuyến tính chuyển màu dọc theo một đường thẳng ở một góc chỉ định, còn gradient tỏa tròn chuyển từ điểm trung tâm ra ngoài…

■ 03

Các trường hợp mẫu

Bao gồm Gradient tuyến tính, Gradient tỏa tròn và Gradient nhiều điểm dừng để bạn có thể nhanh chóng so sánh các đầu vào và đầu ra thông dụng.

/ Công cụ liên quan

/ Mã nguồn

■

Mã nguồn từ công cụ đã chọn, hiển thị ở đây bên cạnh phiên bản trực tiếp ở bên phải.

/ Mã nguồn

TypeScript

typescript

// No external dependencies needed - generates CSS gradient strings

interface ColorStop {
  color: string;
  position: number; // 0-100
}

type GradientType = 'linear' | 'radial';

interface GradientOptions {