Tạo gradient CSS

Công cụ tạo CSS gradient là gì?

Công cụ tạo CSS gradient là trình chỉnh sửa trực quan cho các hàm linear-gradient, radial-gradient và conic-gradient trong CSS. Nó giúp bạn khỏi phải gõ tay từng điểm dừng màu: kéo màu trên thanh trượt, xem bản xem trước cập nhật và sao chép CSS dùng ngay, dán thẳng vào stylesheet.

Gradient có mặt khắp nơi trong giao diện hiện đại: phần hero, lớp phủ trên thẻ, trạng thái nút, hiệu ứng phát sáng, chi tiết tinh tế ở chế độ tối, skeleton khi tải trang và viền trang trí. Biết đọc và viết gradient bằng tay giúp bạn làm nhanh hơn, nhưng để phác thảo ý tưởng thì không gì bằng một công cụ trực quan.

CSS hỗ trợ ba loại gradient. *Linear* chạy dọc theo một đường thẳng ở góc bất kỳ. *Radial* tỏa ra từ một điểm theo hình tròn hoặc elip. *Conic* quét màu quanh một tâm như mặt đồng hồ. Mỗi loại có trường hợp dùng riêng, và bạn có thể kết hợp nhiều gradient trên cùng một nền.

Bạn học được gì khi thiết kế gradient

• Một gradient được xác định bởi *hướng* (hoặc hình dạng) và các *điểm dừng màu*, tức các màu kèm vị trí tùy chọn.
• Hai điểm dừng màu ở cùng một vị trí tạo ra *cạnh sắc*, hữu ích cho sọc hoặc nền chia đôi.
• Các không gian màu hiện đại như oklch cho gradient mượt hơn và đồng đều hơn theo cảm nhận so với rgb hay hsl.
• Gradient là hình ảnh trong CSS: bạn có thể dùng chúng ở mọi nơi background-image, border-image, mask-image hoặc filter chấp nhận một hình ảnh.

Cách tạo CSS gradient từng bước

1. 1

   Chọn loại gradient

   Chọn linear cho dải màu thẳng, radial cho hiệu ứng mờ dần hình tròn, hoặc conic cho dải màu quét quanh một tâm.

2. 2

   Đặt góc hoặc vị trí

   Với linear, chọn góc theo độ (0deg là từ dưới lên trên trong CSS). Với radial và conic, đặt vị trí tâm.

3. 3

   Thêm và sắp xếp điểm dừng màu

   Thêm bao nhiêu màu tùy thích. Kéo từng điểm dừng dọc thanh trượt để đổi vị trí. Hai điểm dừng ở cùng vị trí tạo ra cạnh sắc.

4. 4

   Xem trước trên hình dạng thật

   Chuyển giữa phần hero toàn chiều rộng, một thẻ và một nút để xem gradient trông thế nào ở các tỷ lệ khung hình khác nhau.

5. 5

   Sao chép CSS

   Sao chép khai báo background dùng ngay và dán vào stylesheet.

Tra cứu nhanh CSS gradient

Ba hàm gradient và các thành phần bên trong chúng. Tài liệu đầy đủ trên MDN: linear-gradient, radial-gradient, conic-gradient.

Ví dụ CSS gradient để thử

.hero {  background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}

.card {  background:    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),    #1f2230;}

.stripes {  background: repeating-linear-gradient(    45deg,    #1a1a1a 0 12px,    #2a2a2a 12px 24px  );}

Lỗi thường gặp với CSS gradient

• Dùng quá nhiều điểm dừng màu: ba hoặc bốn thường là đủ; nhiều hơn dễ làm kết quả bị đục màu.
• Quên rằng 0deg là từ dưới lên trên trong CSS gradient (khác với nhiều công cụ thiết kế, nơi 0° là hướng sang phải).
• Đặt chữ trên gradient có độ tương phản cao mà không kiểm tra độ dễ đọc ở cả hai đầu: hãy nhớ đến độ tương phản WCAG.
• Tạo animation trực tiếp cho background-image. Phần lớn trình duyệt không chuyển mượt giữa các gradient: hãy tạo animation cho background-position hoặc dùng transition trên một biến dùng chung.
• Kéo giãn gradient trên phần tử rất rộng mà không để ý hiện tượng phân dải màu. Thêm điểm dừng trung gian hoặc dùng oklch để chuyển màu mượt hơn.

Câu hỏi thường gặp về CSS gradient