Trình tạo Gradient

Tạo dải màu tuyến tính, tỏa tròn hoặc hình nón, thêm các điểm dừng màu và thiết lập hướng, sau đó sao chép mã CSS chỉ với một cú nhấp chuột.

Loại gradient
Các điểm dừng màu
CSS
Điều chỉnh các điểm dừng và hướng để định hình dải màu của bạn.

Mọi dải màu đều được kết xuất trực tiếp trong trình duyệt của bạn. Không có dữ liệu nào bạn thiết lập được tải lên BroBroGo.

Hỏi đáp

Sự khác biệt giữa dải màu linear, radial và conic là gì?

Dải màu tuyến tính (linear) pha trộn các màu dọc theo một đường thẳng mà bạn định hướng bằng một góc xoay. Dải màu tỏa tròn (radial) lan tỏa chúng từ tâm ra ngoài theo hình tròn hoặc hình elip. Dải màu hình nón (conic) quét các màu xung quanh tâm giống như một bánh xe màu sắc.

Điểm dừng màu (color stops) là gì?

Mỗi điểm dừng màu (color stop) là một màu được ghim vào một vị trí dọc theo dải màu — 0% ở điểm bắt đầu, 100% ở điểm kết thúc. Di chuyển điểm dừng để thay đổi nơi màu sắc đó đạt đỉnh, hoặc thêm nhiều điểm dừng hơn để có sự pha trộn phong phú hơn. Bạn có thể sử dụng tối đa tám điểm dừng.

Làm cách nào để kiểm soát hướng của dải màu?

Đối với dải màu tuyến tính (linear) hoặc hình nón (conic), thanh trượt góc sẽ thiết lập hướng — 0° hướng lên trên, 90° hướng sang phải. Dải màu tỏa tròn (radial) không có góc; thay vào đó, hãy chọn hình dạng vòng tròn hoặc hình elip để thay đổi cách nó lan tỏa.

Được viết và kiểm tra bởi đội ngũ biên tập BroBroGo.Cập nhật lần cuối:

Giới thiệu về Trình tạo Gradient

Trình tạo Gradient là một công cụ trực quan mạnh mẽ giúp bạn tạo mã CSS gradient bằng cách lựa chọn loại dải màu, điều chỉnh hướng hoặc hình dạng, và thêm tối đa tám điểm dừng màu. Khi bạn thực hiện các thay đổi, công cụ sẽ hiển thị một bản xem trước trực tiếp (Preview) của dải màu và cho phép bạn sao chép mã CSS được tạo ra chỉ với một cú nhấp chuột.

Công cụ này được thiết kế để đáp ứng nhu cầu của nhiều đối tượng người dùng khác nhau:

  • Những ai muốn tạo một nền CSS (CSS background).
  • Người dùng chỉ cần điều chỉnh hai màu sắc và một hướng cho dải màu.
  • Các nhà thiết kế hoặc nhà phát triển front-end cần điều chỉnh loại, vị trí và nhiều điểm dừng màu phức tạp của một dải màu.

Các tùy chọn đầu vào của công cụ

Để tạo ra dải màu theo ý muốn, bạn có thể thiết lập các thông số đầu vào sau đây:

  • Loại gradient (Gradient type): Bạn có thể chọn giữa ba loại dải màu là Tuyến tính (Linear), Tỏa tròn (Radial), hoặc Hình nón (Conic).
  • Góc xoay (Angle): Đây là giá trị số áp dụng cho dải màu tuyến tính hoặc hình nón để xác định hướng của dải màu.
  • Hình dạng (Shape): Đối với dải màu tỏa tròn, bạn có thể chọn giữa Hình elip hoặc Hình tròn.
  • Các điểm dừng màu (Color stops): Bạn được phép thiết lập tối đa tám điểm dừng màu, mỗi điểm dừng bao gồm:
    • Màu điểm dừng (Stop color): Giá trị màu sắc cụ thể.
    • Vị trí (Position): Tỷ lệ phần trăm kéo dài từ 0% đến 100%.

Kết quả đầu ra và tương tác giao diện

Sau khi cấu hình các thông số, công cụ sẽ cung cấp các kết quả đầu ra trực quan và mã nguồn:

  • Bản xem trước (Preview): Một hình ảnh đại diện trực quan hiển thị trực tiếp dải màu ngay khi bạn thay đổi các thiết lập.
  • CSS: Đoạn mã CSS hoàn chỉnh được tạo ra tương ứng với dải màu của bạn.

Giao diện của công cụ hỗ trợ các tương tác nhanh chóng:

  • Dải màu ban đầu khi vừa mở công cụ sẽ bao gồm hai điểm dừng màu mặc định là #6366f1 0% và #ec4899 100%.
  • Khi bạn thêm một điểm dừng màu mới bằng nút Thêm điểm dừng màu, vị trí mặc định của điểm dừng mới này sẽ là 50%.
  • Bạn có thể thêm tối đa tám điểm dừng màu. Khi đã có đủ tám điểm dừng màu trên thanh cấu hình, nút Thêm điểm dừng màu sẽ bị vô hiệu hóa.
  • Sau khi bạn nhấp vào nút Sao chép CSS, trạng thái của nút này sẽ chuyển thành "Copied" để xác nhận thao tác thành công.

Nguyên lý hoạt động của các loại dải màu

Mỗi loại dải màu trong CSS có cách thức phân bổ màu sắc riêng biệt:

  • Dải màu tuyến tính (Linear gradient): Pha trộn các màu sắc dọc theo một đường thẳng, trong đó góc xoay sẽ quyết định hướng di chuyển của dải màu. Thanh trượt góc xoay thiết lập hướng cụ thể, với 0° chỉ thẳng lên trên và 90° chỉ sang bên phải.
  • Dải màu tỏa tròn (Radial gradient): Lan tỏa màu sắc từ tâm ra ngoài theo hình tròn hoặc hình elip. Loại dải màu này không sử dụng góc xoay; thay vào đó, bạn sẽ chọn hình dạng là hình tròn hoặc hình elip.
  • Dải màu hình nón (Conic gradient): Quét các màu sắc xung quanh một điểm tâm tương tự như cách hoạt động của một bánh xe màu sắc. Hướng quét cũng được xác định bởi thanh trượt góc xoay, với 0° hướng lên trên và 90° hướng sang phải.

Vai trò của các điểm dừng màu (Color stops)

Điểm dừng màu là yếu tố cốt lõi để định hình thiết kế dải màu của bạn. Mỗi điểm dừng màu là một màu sắc được ghim cố định tại một vị trí dọc theo dải màu, bắt đầu từ 0% ở điểm khởi đầu và kết thúc tại 100% ở điểm cuối cùng.

Bằng cách điều chỉnh vị trí phần trăm của từng điểm dừng, bạn có thể kiểm soát chính xác nơi màu sắc đó đạt đỉnh và cách nó pha trộn với các màu sắc lân cận. Việc sử dụng nhiều điểm dừng màu (tối đa là 8 điểm dừng) cho phép các nhà thiết kế tạo ra những hiệu ứng chuyển màu phức tạp, phong phú và mượt mà hơn cho các giao diện web.

Chính sách bảo mật và xử lý dữ liệu

Khi sử dụng công cụ này, bạn hoàn toàn có thể yên tâm về vấn đề quyền riêng tư. Mọi dải màu đều được kết xuất trực tiếp trong trình duyệt của bạn, và không có dữ liệu nào bạn thiết lập trong công cụ được tải lên hệ thống của BroBroGo.

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

Sự khác biệt giữa dải màu linear, radial và conic là gì? Dải màu tuyến tính (linear) pha trộn các màu dọc theo một đường thẳng mà bạn định hướng bằng một góc xoay. Dải màu tỏa tròn (radial) lan tỏa chúng từ tâm ra ngoài theo hình tròn hoặc hình elip. Dải màu hình nón (conic) quét các màu xung quanh tâm giống như một bánh xe màu sắc.

Điểm dừng màu (color stops) là gì? Mỗi điểm dừng màu (color stop) là một màu được ghim vào một vị trí dọc theo dải màu — 0% ở điểm bắt đầu, 100% ở điểm kết thúc. Di chuyển điểm dừng để thay đổi nơi màu sắc đó đạt đỉnh, hoặc thêm nhiều điểm dừng hơn để có sự pha trộn phong phú hơn. Bạn có thể sử dụng tối đa tám điểm dừng.

Làm cách nào để kiểm soát hướng của dải màu? Đối với dải màu tuyến tính (linear) hoặc hình nón (conic), thanh trượt góc sẽ thiết lập hướng — 0° hướng lên trên, 90° hướng sang phải. Dải màu tỏa tròn (radial) không có góc; thay vào đó, hãy chọn hình dạng vòng tròn hoặc hình elip để thay đổi cách nó lan tỏa.

Trình tạo CSS Cubic BezierKéo hai tay cầm để tạo đường cong gia tốc, quan sát chuyển động thực tế so với chuyển động đều và sao chép giá trị cubic-bezier().Trình tạo Box ShadowKéo các thanh trượt để tạo hiệu ứng box-shadow, xếp chồng các lớp để tạo chiều sâu và sao chép mã CSS hoàn thiện ngay lập tức.Trình tạo Border RadiusBo tròn từng góc bằng thanh trượt, tạo hình giọt nước tự nhiên với chế độ elip và sao chép mã CSS ngay lập tức.Trình tạo FlexboxThiết lập khung chứa flex và các phần tử con bằng các điều khiển trực quan, quan sát bố cục phản hồi trực tiếp và sao chép mã CSS chỉ với một cú nhấp chuột.Trình tạo CSS GridThiết lập các cột và hàng, kéo chuột qua các ô để đặt phần tử và sao chép mã CSS kèm HTML tương ứng chỉ với một cú nhấp chuột.Công cụ tính CSS clamp()Nhập kích thước cho màn hình nhỏ và lớn để nhận giá trị clamp() co giãn mượt mà ở giữa — áp dụng cho cỡ chữ, padding, margin hoặc gap.Bộ chuyển đổi màu sắcChuyển đổi màu sắc giữa HEX, RGB, HSL, HSV, CMYK và LAB — chỉnh sửa bất kỳ trường nào và các trường còn lại sẽ tự động cập nhật.Công cụ Làm đẹp & Thu gọn CSSThụt lề lại CSS lộn xộn để dễ đọc, hoặc thu gọn để tối ưu hóa dung lượng — với chế độ an toàn không bao giờ thay đổi thứ tự các quy tắc của bạn.Công cụ kiểm tra độ tương phảnNhập màu chữ và màu nền để xem tỷ lệ tương phản WCAG và kiểm tra xem các mức độ AA và AAA có đạt chuẩn hay không.