CSS Gradient Generator

Build linear, radial, conic, and repeating gradients directly in your browser. Tune the angle, focal point, and color-stop positions, then copy the generated CSS.

Browse 180 gradient presets
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

Giới thiệu CSS Gradient Generator

Công cụ này giúp tạo gradient CSS trực quan rồi sao chép khai báo CSS vào stylesheet, component hoặc prototype. Linear, radial, conic và repeating gradient đều được xử lý ngay trên trình duyệt.

Cách tạo CSS gradient

  1. 1

    Chọn loại gradient

    Chọn linear, radial hoặc conic; chỉ bật repeating khi cần pattern lặp.

  2. 2

    Chỉnh màu và color stop

    Đổi mã màu và vị trí từng stop trong khoảng 0 đến 100 phần trăm.

  3. 3

    Chỉnh hình học

    Đặt góc cho linear/conic hoặc thay đổi tâm của radial/conic gradient.

  4. 4

    Sao chép CSS

    Copy khai báo background-image và kiểm tra lại trong layout thực tế.

Câu hỏi về CSS gradient

Công cụ có upload màu hoặc thiết kế của tôi không?

Không. Việc chỉnh gradient và tạo CSS diễn ra ngay trên trình duyệt.

Có thể dùng nhiều hơn hai màu không?

Có. Editor hỗ trợ nhiều color stop để tạo gradient từ hai màu hoặc nhiều màu.

Tool xuất CSS dạng nào?

Tool tạo background-image bằng linear-gradient, radial-gradient, conic-gradient hoặc các biến thể repeating.

Three gradient models

Switch between linear, radial, and conic CSS gradients without rewriting syntax.

2–8 color stops

Edit each color and position independently, reverse the order, or randomize a palette.

Runs in your browser

Gradient editing and CSS generation happen locally; no image upload or backend job is required.

FAQ

css gradient generator questions

?How do color stops differ from the gradient angle?

Stops control which colors appear and where they blend. The angle controls the direction across the element.

?Where should I paste the CSS gradient?

Apply the generated background declaration to an element with visible dimensions. Existing background rules may override it, so check your stylesheet order.