What types of gradients can I create?

You can create both static gradients (linear and radial) for CSS/PNG export, and fluid animated gradients using Three.js for video export.

Can I export gradients as CSS code?

Yes, static gradients can be exported as CSS, Tailwind CSS, or PNG images. Fluid gradients can be exported as videos or static images.

Yes, all gradient tools are completely free to use with no limitations or registration required.

Tạo gradient tuyến tính hoặc xuyên tâm và xuất dưới dạng CSS, Tailwind hoặc PNG.

Loại

Góc: 90°

0°90°180°270°360°

Quick Directions

Định dạng màu

Preview at export size

Hiển thị lưới phủ (chỉ xem trước)

Hữu ích cho căn chỉnh khi chỉnh sửa. Hình ảnh xuất luôn khớp với màu hiển thị.

Chiều rộng

Chiều cao

Định dạng

CSS

.gradient {
  background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}

Tailwind CSS

bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]

1920×1080

0%50%100%

Color

Position: 0%

Opacity: 100%