Gradient

CSS Gradient Generator

Xây dựng linear, radial và conic gradient với số stop không giới hạn, nội suy theo OKLCH và đầu ra utility Tailwind v4. Xem trước trực tiếp, hơn 30 preset, ngay trong trình duyệt của bạn.

Linear chuyển màu dọc theo một đường thẳng ở góc đã chọn (0° = lên, 90° = sang phải). Radial chuyển màu từ một điểm trung tâm ra ngoài — circle hoặc ellipse, với từ khóa size như farthest-corner. Conic xoay quanh một điểm trung tâm — color stop nằm tại các góc như kim đồng hồ. Conic rất hợp cho biểu đồ tròn, mặt đồng hồ và nền color-wheel tổng hợp.

Khi chuyển giữa các hue không tương đồng — ví dụ xanh dương → vàng, hoặc đỏ → xanh lá. Nội suy sRGB mặc định đi qua một điểm giữa xám đục; OKLCH (CSS Color Module 4 in oklch) giữ điểm giữa rực rỡ vì nó nội suy trong không gian đồng nhất theo cảm quan. Với gradient hai stop giữa các hue tương tự, khác biệt nhỏ. Với gradient nhiều stop hoặc dải hue rộng, OKLCH tốt hơn rõ rệt.

Color stop
CSS
Tailwind v4
JSON
Preset

Được xây dựng cho CSS gradient ở môi trường production

Linear / radial / conic, mượt theo OKLCH, tương thích Tailwind — cùng vài chi tiết nhỏ giúp việc sử dụng thực sự thú vị.

Ba loại gradient

Linear với góc 0-360°, radial với circle/ellipse + size + vị trí, conic với from-angle + vị trí. Tất cả đều xuất ra cú pháp CSS Images Module Level 4 chuẩn mực.

Tối đa 12 color stop

Thêm stop ở bất kỳ phần trăm nào, kéo thanh trượt để tinh chỉnh vị trí, nhấp vào ô màu để chọn màu hoặc dán HEX. Stop tự động sắp xếp khi xuất. Nhấp × để xóa (tối thiểu 2 stop).

Nội suy theo OKLCH

Chuyển qua lại giữa nội suy sRGB mặc định và in oklch hiện đại. OKLCH cho điểm giữa mượt hơn theo cảm quan — không còn dải xám đục khi chuyển qua các bước nhảy hue. Tự động fallback gọn gàng trên các trình duyệt chưa hỗ trợ CSS Color 4.

Đầu ra CSS, Tailwind v4, JSON

Ba khung đầu ra cập nhật trực tiếp: CSS thô (background-image: linear-gradient(...)), utility arbitrary-value của Tailwind v4 (bg-[linear-gradient(...)]) và đoạn design token JSON sẵn sàng cho Style Dictionary hoặc Figma Tokens.

Hơn 30 preset được tuyển chọn

Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — nhấp để tải và tinh chỉnh. Mỗi preset là một điểm khởi đầu chất lượng production thực thụ, không chỉ là một cái tên.

Xem trước trực tiếp + thiết kế ưu tiên quyền riêng tư

Bản xem trước được render bằng background-image gốc của trình duyệt, nên những gì bạn thấy đúng chính xác là những gì stylesheet sẽ tạo ra. Mọi pixel chạy cục bộ — mở DevTools → Network và xác minh không có request đi ra nào.

Cách xây dựng một CSS gradient

Bốn bước từ trang trắng đến CSS, Tailwind hoặc JSON sẵn sàng cho production.

  1. 1

    Chọn loại gradient

    Linear cho nền, header, hero section. Radial cho spotlight, vignette, nút phát sáng. Conic cho biểu đồ tròn, color wheel và những nền tổng hợp đang thịnh hành. Chuyển qua lại giữa chúng bằng các tab — color stop của bạn được giữ nguyên qua mỗi lần chuyển.

  2. 2

    Đặt color stop

    Nhấp vào ô màu để mở bộ chọn, hoặc dán HEX trực tiếp vào ô. Kéo thanh trượt để đặt vị trí stop 0-100%. Nhấp + Add stop để chèn một stop mới ở khoảng trống lớn nhất (với màu trung điểm). Tối đa 12 stop.

  3. 3

    Tinh chỉnh hình học + nội suy

    Với linear, đặt góc (0° hướng lên, 90° hướng phải). Với radial, chọn shape, từ khóa size và vị trí trung tâm. Với conic, đặt góc khởi đầu. Chuyển Color interpolation sang OKLCH để có điểm giữa mượt theo cảm quan trên các gradient nhiều hue.

  4. 4

    Sao chép đầu ra

    Ba khung cập nhật trực tiếp: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (dạng design token). Dùng biểu tượng sao chép trên mỗi khung, hoặc nhấn Download CSS để lưu một tệp gradient.css sẵn sàng đưa vào project.

Được xây dựng cho designer + developer

Bốn tình huống phổ biến mà một công cụ trình duyệt ưu tiên quyền riêng tư đánh bại việc mở Figma + một trang gradient riêng.

Nền hero section cho trang marketing

Chọn một preset gần với thương hiệu, đưa hai màu thương hiệu của bạn vào các stop, chuyển sang nội suy OKLCH để có điểm giữa sạch sẽ. Sao chép CSS, dán vào stylesheet của hero. Tổng thời gian: dưới 2 phút.

Gradient cho nút + thẻ nhận biết thương hiệu

Xây dựng một gradient 3 stop cho thương hiệu một lần, sao chép thành design token JSON, đưa vào Style Dictionary / Figma Tokens. Giờ mọi nút + thẻ trên mọi nền tảng đều dùng cùng một gradient theo tham chiếu. Cập nhật ở một chỗ, lan tỏa khắp nơi.

Nền conic cho biểu đồ + dashboard

Conic gradient tổng hợp rất hợp cho hình ảnh biểu đồ tròn, vòng tiến độ hoặc trạng thái shimmer 'đang tải dữ liệu'. Chọn loại conic, đặt from-angle, đưa stop vào đúng phần trăm — phép toán khớp chính xác góc 0-360° với vị trí phần trăm.

Nền tùy chỉnh cho slide, bài đăng mạng xã hội, ảnh hero

Xây dựng gradient, đặt tỉ lệ khung hình khớp với mục tiêu (16:9 cho slide, 1:1 cho IG, 3:1 cho header X), chụp màn hình bản xem trước. Hoặc sao chép CSS vào một tệp HTML rời và chụp màn hình trong trình duyệt ở đúng kích thước pixel bạn cần.

100% riêng tư — chạy trong trình duyệt của bạn

Màu sắc và gradient của bạn không bao giờ rời khỏi thiết bị. Mở DevTools → Network và bạn sẽ thấy không có request đi ra nào trong bất kỳ thao tác nào.

  • Việc lắp ráp chuỗi gradient, serialize CSS / Tailwind / JSON và bản xem trước trực tiếp đều chạy dưới dạng JavaScript trên máy của bạn — không render phía server, không API bên thứ ba.
  • Bản xem trước dùng background-image CSS gốc — nên gradient được render khớp chính xác với những gì stylesheet sẽ tạo ra trong trình duyệt của người dùng cuối.
  • Không đăng nhập, không telemetry với giá trị màu. Chúng tôi chỉ dùng một cookie cho trạng thái cookie-consent và một cookie cho lựa chọn ngôn ngữ.

Hướng dẫn liên quan

Những bài đọc được tuyển chọn về CSS gradient, nội suy OKLCH và các hệ thống design token.

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

Khác biệt giữa linear, radial và conic là gì?

Linear chuyển màu dọc theo một đường thẳng ở góc đã chọn (0° = lên, 90° = sang phải). Radial chuyển màu từ một điểm trung tâm ra ngoài — circle hoặc ellipse, với từ khóa size như farthest-corner. Conic xoay quanh một điểm trung tâm — color stop nằm tại các góc như kim đồng hồ. Conic rất hợp cho biểu đồ tròn, mặt đồng hồ và nền color-wheel tổng hợp.

Khi nào nên dùng nội suy OKLCH?

Khi chuyển giữa các hue không tương đồng — ví dụ xanh dương → vàng, hoặc đỏ → xanh lá. Nội suy sRGB mặc định đi qua một điểm giữa xám đục; OKLCH (CSS Color Module 4 in oklch) giữ điểm giữa rực rỡ vì nó nội suy trong không gian đồng nhất theo cảm quan. Với gradient hai stop giữa các hue tương tự, khác biệt nhỏ. Với gradient nhiều stop hoặc dải hue rộng, OKLCH tốt hơn rõ rệt.

Đầu ra Tailwind v4 cho tôi cái gì?

Một utility arbitrary-value bạn có thể dán thẳng vào JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Không cần thay đổi tailwind.config.js; hoạt động trên bất kỳ project Tailwind 4 nào. Nếu bạn thích token màu có tên, hãy sao chép CSS thay thế và tự chuyển đổi.

Gradient có hoạt động trên các trình duyệt cũ không?

Linear và radial gradient đã được hỗ trợ rộng rãi từ năm 2014. Conic gradient có mặt trên tất cả các trình duyệt evergreen vào năm 2021. Từ khóa nội suy in oklch được hỗ trợ trên Chrome 111+, Safari 16.2+, Firefox 113+. Nếu cần hỗ trợ trình duyệt cũ, hãy dùng nội suy sRGB mặc định — khác biệt thị giác rõ nhất ở các gradient nhiều stop có hue nhảy lớn.

Có thông tin nào được gửi về máy chủ không?

Không. Việc tạo chuỗi gradient, serialize CSS / Tailwind / JSON và bản xem trước trực tiếp đều chạy bằng JavaScript trên thiết bị của bạn. Mở DevTools → Network và bạn sẽ thấy không có request đi ra nào trong bất kỳ thao tác nào. Dán màu thương hiệu, token nội bộ — không có gì rời khỏi laptop của bạn.