Trình tạo gradient CSS

Về các gradient CSS

Các gradient CSS cho phép hiển thị các chuyển tiếp mượt mà giữa hai hoặc nhiều màu, mà không cần sử dụng hình ảnh. Chúng được tạo bởi trình duyệt, có nghĩa là chúng thích nghi hoàn hảo với mọi độ phân giải và không thêm trọng lượng nào vào việc tải trang. Các gradient được xác định thông qua thuộc tính background với các hàm linear-gradient() hoặc radial-gradient().

Lịch sử ngắn về Gradient CSS

Gradient CSS được định nghĩa trong CSS Image Values and Replaced Content Module Level 3, được duy trì bởi W3C CSS Working Group và biên tập bởi Tab Atkins Jr. và Elika J. Etemad cùng những người khác. First Public Working Draft là ngày 12 tháng 7 năm 2011; đặc tả đạt Candidate Recommendation vào ngày 17 tháng 4 năm 2012, khóa cú pháp hiện đại không có tiền tố, bao gồm quy ước rằng 0deg chỉ lên trên (về phía đỉnh) và to right bằng 90deg. Thứ tự gửi của trình duyệt: WebKit là đầu tiên với khoảng cách lớn, với -webkit-gradient() có thể sử dụng trong Safari 4 (2009) sử dụng cú pháp nặng nề về gọi hàm. Firefox đã gửi -moz-linear-gradient() trong Firefox 3.6 vào ngày 21 tháng 1 năm 2010; Internet Explorer 10 đã gửi các dạng không có tiền tố vào năm 2012; cú pháp không có tiền tố ổn định trên tất cả các engine chính vào cuối năm 2013. conic-gradient() được đặc tả sau này trong CSS Images Level 4, Lea Verou đã soạn thảo đề xuất vào năm 2011, Tab Atkins đã thêm nó vào đặc tả vào năm 2012, và việc gửi native đã đến trong Chrome 69 (4 tháng 9 năm 2018), Safari 12.1 (25 tháng 3 năm 2019) và Firefox 83 (17 tháng 11 năm 2020). Vào năm 2026 bạn có thể viết background: linear-gradient(...) và background: radial-gradient(...) một cách tự tin mà không cần tiền tố và không cần fallback cho bất kỳ trình duyệt nào đáng hỗ trợ.

linear-gradient: Góc, Cạnh, và Sự tinh tế của Đường chéo

Ngữ pháp chính thức là linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). Quy ước góc thường khiến các developer vấp ngã vì nó khác với quy ước SVG/canvas. 0deg bằng với to top, đường gradient chỉ lên trên, vì vậy màu cuối cùng xuất hiện ở trên. 90deg bằng với to right. 180deg bằng với to bottom (mặc định nếu không có hướng nào được đưa ra). 270deg bằng với to left. 135deg là đường chéo kinh điển, trên-trái đến dưới-phải, hướng gradient phổ biến nhất trong thiết kế web hiện đại. Các góc tăng dần quay theo chiều kim đồng hồ từ trên, ngược với quy ước toán học (nơi 0 là phải và các góc tăng ngược chiều kim đồng hồ) và ngược với <linearGradient> của SVG. Một sự tinh tế hữu ích: to right và 90deg chỉ tương đương trên các hộp vuông. Trên một hộp không vuông, to top right tạo ra một đường gradient hoàn toàn vuông góc với đường chéo từ góc dưới-trái, nghĩa là gradient chạm vào góc một cách sạch sẽ, trong khi 45deg luôn luôn theo nghĩa đen là 45 độ bất kể tỷ lệ khung hình. Đối với hầu hết các nền hero, sự phân biệt này không quan trọng; đối với các thiết kế được căn chỉnh chính xác thì có thể.

radial-gradient: Hình dạng, Kích thước và Vị trí

Ngữ pháp là radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Hai giá trị hình dạng: circle (hình tròn hoàn hảo được mở rộng đến hộp) và ellipse (mặc định, được kéo dài đến tỷ lệ khung hình của hộp). Kích thước có thể là một trong bốn từ khóa extent hoặc độ dài/phần trăm rõ ràng. closest-side: hình dạng kết thúc chạm vào cạnh gần nhất. closest-corner: hình dạng kết thúc đi qua góc gần nhất một cách chính xác. farthest-side: hình dạng kết thúc chạm vào cạnh xa nhất. farthest-corner (mặc định): hình dạng kết thúc đi qua góc xa nhất. Mệnh đề at <position> di chuyển trung tâm, at top left, at 30% 70%, v.v. Trung tâm mặc định là at center center. Gradient radial là cách bạn tạo hiệu ứng đèn pha, ánh sáng mềm, nền "vignette" nơi các cạnh tối đi về phía đen, và nền badge tròn. Chúng ít phổ biến hơn đáng kể so với gradient linear trong sử dụng sản xuất 2026, hầu hết các nền "gradient" bạn thấy trên trang đích là linear, nhưng chúng không thể thiếu cho các trường hợp mà linear không thể tiếp cận.

Color Stop, Trái tim của một Gradient

Một color stop là một giá trị màu với vị trí tùy chọn dọc theo đường gradient. linear-gradient(red, blue) đặt đỏ ở 0% và xanh ở 100%, với nội suy mượt mà ở giữa. linear-gradient(red 0%, yellow 50%, blue 100%) thêm một stop màu vàng ở giữa. Các stop với vị trí rõ ràng có thể được đặt ở bất kỳ đâu từ 0% đến 100%, và các stop không có vị trí rõ ràng được phân phối đều giữa các hàng xóm có vị trí rõ ràng của chúng. Hard color stops, hai stop ở cùng vị trí, như linear-gradient(red 50%, blue 50%), tạo ra một chuyển tiếp tức thì thay vì một sự pha trộn mượt mà. Đây là thủ thuật đằng sau mọi mẫu CSS: sọc, bàn cờ, chấm, tất cả đều được xây dựng từ các stack gradient với hard stop. Color interpolation hints (CSS Images Level 4): chèn một phần trăm trần giữa hai stop làm thiên lệch nơi điểm giữa của nội suy rơi vào. linear-gradient(red, 25%, blue) chuyển điểm giữa cảm thụ đến 25% thay vì mặc định 50%, hữu ích để cân nhắc tinh tế một màu so với màu khác. Nội suy không gian màu hiện đại (CSS Color Module 4, baseline 2023+): linear-gradient(in oklch, red, blue) nội suy trong không gian màu Oklab đồng nhất cảm thụ thay vì sRGB mã hóa gamma, tạo ra các chuyển tiếp mượt mà hơn qua giữa mà không có "vùng chết" xám đục mà nội suy sRGB tạo ra giữa các màu bổ sung chroma cao. Mặc định vẫn là in oklab (hoặc in srgb trong các trình duyệt cũ hơn), đối với các gradient được tạo bằng tay, bạn có thể chọn tham gia.

Không gian màu hiện đại, Tại sao Gradient oklch trông tốt hơn

Trong hai thập kỷ, mọi gradient CSS đều nội suy các giá trị màu trong sRGB, không gian màu mã hóa gamma mà web đã lớn lên cùng. Nội suy sRGB có một chế độ thất bại nổi tiếng: gradient giữa các màu bổ sung chroma cao (đỏ ↔ xanh lá, xanh dương ↔ vàng, magenta ↔ cyan) đi qua một điểm giữa xám đục. Hãy thử linear-gradient(red, green) trong sRGB và giữa là nâu, không phải ô-liu sáng mà mắt bạn mong đợi. Oklab (Björn Ottosson, tháng 12 năm 2020) là một không gian màu đồng nhất cảm thụ được thiết kế đặc biệt để khắc phục điều này. OKLCH là dạng hình trụ của Oklab, ba tọa độ là Độ sáng (0-100%), Chroma (0+), và Hue (0-360°). Gradient trong OKLCH vẫn mượt mà về cảm thụ trên toàn bộ quá trình chuyển tiếp, với độ sáng tăng đều và hue xoay có thể dự đoán được qua bánh xe màu. Đặc tả CSS Color Module 4 đã thêm <color-interpolation-method> làm tham số cho các hàm gradient: linear-gradient(in oklch, red, blue). Hỗ trợ trình duyệt đạt baseline vào giữa đến cuối năm 2023 (Safari 16.4 tháng 3 năm 2023, Chrome 111 tháng 3 năm 2023, Firefox 113 tháng 5 năm 2023). Đối với các gradient được sử dụng trong hệ thống thiết kế sản xuất, tùy chọn OKLCH ngày càng là lựa chọn đúng đắn; trình tạo này hiện đang phát ra gradient mặc định sRGB và toggle OKLCH ở trong roadmap.

Hiệu suất, Gradient rẻ, nhưng không miễn phí

Gradient CSS được tăng tốc GPU trên mọi trình duyệt hiện đại, làm cho chúng nhanh hơn đáng kể so với hình ảnh bitmap được lát gạch cho hầu hết các trường hợp sử dụng, không có yêu cầu HTTP, không có decode, độc lập với độ phân giải vector, có thể tô màu lại ngay lập tức thông qua các biến CSS. Các trade-off cần biết: chi phí paint mở rộng với số pixel được chạm vào và độ phức tạp của gradient; gradient là một trong những thứ đắt nhất mà trình duyệt có thể vẽ, và xếp chồng nhiều lớp gradient trên toàn viewport hero có thể tốn frame trên GPU thấp cấp. Hoạt hình màu gradient kích hoạt một repaint đầy đủ mỗi frame, đắt hơn nhiều so với hoạt hình transform hoặc opacity. Cách khắc phục hiện đại là sử dụng các thuộc tính tùy chỉnh được đăng ký @property (Houdini Properties and Values API), cho phép trình duyệt nội suy các giá trị màu trên thread compositor thay vì thread chính; được hỗ trợ trong Chrome 78+ (tháng 11 năm 2019), Safari 16.4+ (tháng 3 năm 2023), Firefox 128+ (tháng 7 năm 2024). Phương án thay thế truyền thống rẻ hơn là hoạt hình background-position trên một gradient cố định, một hoạt hình chỉ-compositor thực sự chạy ở 60fps ở khắp mọi nơi. Heuristic hiệu suất chung: nếu trang của bạn có một gradient tĩnh duy nhất, bạn sẽ không bao giờ nhận thấy; nếu bạn đang xếp chồng năm lớp gradient động trên mỗi thẻ trong một danh sách dài, hãy profile nó trước khi gửi.

Nơi Gradient Phát huy Giá trị của Nó

• Nền phần hero. Gradient màu thương hiệu mềm mại đằng sau tiêu đề trang, thường với overlay radial tinh tế cho chiều sâu khí quyển. Stripe, Linear và hầu hết các trang đích SaaS hiện đại đều dựa vào điều này.
• Styling nút bấm. Gradient tinh tế trên các nút CTA chính thêm chiều sâu xúc giác mà màu phẳng đặc không có. Thêm một gradient trạng thái hover hơi tối hơn và nút có cảm giác sống động.
• Overlay hình ảnh cho khả năng đọc văn bản. Một gradient linear dọc mờ dần từ trong suốt ở trên đến tối ở dưới, được phủ trên một hình ảnh hero với văn bản trắng trong vùng tối, làm cho văn bản dễ đọc bất kể bức ảnh trông như thế nào.
• Nền thẻ. Gradient tinh tế trên nền thẻ thêm chiều sâu mà không cần box-shadow nặng.
• Skeleton tải và chỉ báo tiến trình. Skeleton shimmer cổ điển là một gradient linear với màu trắng bán trong suốt di chuyển qua nền xám, được hoạt hình thông qua background-position.
• Glassmorphism và styling UI hiện đại. Hiệu ứng kính mờ được phổ biến bởi macOS Big Sur và iOS, một nền bán trong suốt với backdrop-filter blur, thường được phân lớp với một gradient tinh tế cho hiệu ứng highlight.
• Tương tự gradient mesh. Gradient mesh CSS thực sự vẫn chưa phải là chuẩn (CSS Images Level 5 cuối cùng sẽ thêm chúng), nhưng xếp chồng 3-5 gradient radial lớn với màu bán trong suốt tạo ra hiệu ứng gradient mesh thuyết phục ngày nay.

Phạm vi trung thực: Trình tạo này Làm gì và Không làm gì

Công cụ này tạo gradient CSS linear và radial với xem trước trực tiếp, góc có thể cấu hình (cho linear) hoặc vị trí (cho radial), và bất kỳ số lượng color stop nào với vị trí. Nó phát ra cú pháp hiện đại không có tiền tố. Những gì công cụ này hiện không làm, mà các trình tạo phức tạp hơn xử lý: gradient conic (loại xoay quanh trung tâm, được sử dụng cho biểu đồ tròn, sunburst và bánh xe màu), xem CSS Pattern Generator của Absolutool để có một số ví dụ về mẫu conic; gradient lặp lại (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) cho các lớp đầy theo kiểu sọc và mẫu, cũng được xử lý trong CSS Pattern Generator; toggle nội suy OKLCH / Oklab (không gian màu hiện đại đồng nhất cảm thụ), hiện đang phát ra mặc định sRGB; cú pháp color hint để thiên lệch điểm giữa giữa các stop; keyframe hoạt hình đa stop. Đối với hầu hết các gradient sản xuất (nền hero, kiểu nút, hiệu ứng overlay), linear + radial bao phủ trường hợp sử dụng; đối với các trường hợp kỳ lạ hơn, CSS Pattern Generator là công cụ bổ sung phù hợp.

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

Các gradient CSS có được hỗ trợ bởi tất cả các trình duyệt không?

Có. Các gradient CSS được hỗ trợ bởi tất cả các trình duyệt chính từ năm 2013, với hơn 98% phủ sóng toàn cầu. Bạn không còn cần các tiền tố nhà cung cấp như -webkit- cho việc sử dụng hiện đại.

Góc nào để sử dụng cho một gradient chéo?

135 độ tạo một đường chéo từ trên-trái đến dưới-phải, phổ biến nhất. 45 độ đi từ dưới-trái đến trên-phải. 90 độ đi từ trái sang phải, và 180 độ đi từ trên xuống dưới.

Tôi có thể sử dụng nhiều hơn hai màu không?

Hoàn toàn có thể. Nhấp «Thêm điểm» để thêm tới 8 điểm màu. Bạn có thể kiểm soát mỗi màu và vị trí của nó dọc theo gradient. Các gradient đa điểm tạo ra các hiệu ứng trực quan phong phú và năng động hơn.

Tại sao không có tùy chọn gradient conic?

Gradient conic (loại xoay quanh trung tâm, được sử dụng cho biểu đồ tròn, sunburst và bánh xe màu) là một vấn đề thiết kế khác với gradient linear và radial, các tham số là góc xung quanh trung tâm thay vì vị trí dọc theo đường thẳng. Để biết các ví dụ và mẫu conic-gradient, hãy sử dụng CSS Pattern Generator của Absolutool, xử lý các trường hợp kỳ lạ hơn (conic, repeating-linear, repeating-conic) cho các lớp đầy theo kiểu mẫu. Trình tạo này tập trung vào các trường hợp linear+radial bao phủ phần lớn các gradient hero-và-nút sản xuất.

Gradient CSS có nhanh hơn nền hình ảnh không?

Đối với hầu hết các trường hợp, có, gradient CSS loại bỏ một yêu cầu HTTP, một bước decode, và việc gửi tài nguyên đa độ phân giải cần thiết cho màn hình retina. Gradient cũng hoàn hảo về vector ở mọi mức thu phóng và có thể tô màu lại dễ dàng thông qua các biến CSS. Trade-off: gradient được GPU vẽ nhưng chi phí paint mở rộng theo diện tích pixel và độ phức tạp của stop; xếp chồng nhiều lớp gradient trên toàn viewport hero có thể tốn frame trên GPU thấp cấp. Đối với hoạt hình, hoạt hình background-position (chỉ compositor, rẻ) thay vì color stop gradient (repaint đầy đủ, đắt). Gradient tĩnh đơn lẻ trên thẻ hoặc phần hero, không bao giờ nhận thấy.

Dữ liệu của tôi có được gửi đi đâu không?

Không. Quá trình tạo chạy hoàn toàn trong trình duyệt của bạn, color picker, thanh trượt góc và tạo mã CSS đều chạy cục bộ. Không có yêu cầu đi ra khi bạn sử dụng các điều khiển. CSS được tạo là của bạn để dán bất kỳ nơi nào.

Công cụ liên quan