Use this free gradient creator to make beautiful gradients for your projects. Customize colors, directions, and download in various formats, including CSS, JSON, and PNG. Perfect for web design, UI/UX projects, and more.
Background: Linear-Gradient(90deg, #0000FF, #FF0000);Create smooth color transitions without images. Perfect for modern backgrounds, buttons, and UI elements.
Build linear gradients with custom colors and directions. Export as CSS, PNG, or JSON.
Control gradient flow with angles (0°-360°) or keywords (to top, to right).
0° = ↑, 90° = →, 180° = ↓, 270° = ←
to top, to right, to bottom left, etc.
Define where each color appears. Use 2-6 colors with precise positioning control.
Colors evenly spaced by default
Control exact placement with percentages
Widely supported, vector-based, and lightweight. Perfect performance across all modern browsers.
All modern browsers (IE10+)
No HTTP requests, infinitely scalable
Website headers and landing pages
Buttons, cards, and interactive components
Improve text readability over images
Start with 2-3 colors maximum
Ensure sufficient contrast for text
Use colors that align with your identity