Create beautiful linear, radial, and conic gradients with full customization. Copy CSS code instantly or export your gradient as PNG, JPG, WebP, or SVG. Perfect for web backgrounds, social media graphics, and design projects. Try our AI Color Palette Generator for color inspiration.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Most common type. Colors transition along a straight line at any angle. Perfect for backgrounds, buttons, and headers. Use 90° for vertical, 0° for horizontal, or 45° for diagonal effects.
Circular transitions. Colors radiate outward from a center point. Great for spotlight effects, glows, and circular UI elements. Adjust the center position for off-center effects.
Angular sweep. Colors rotate around a center point like a color wheel. Ideal for pie charts, loading spinners, and artistic effects. Combine with our SVG Icon Animator for animated gradients.
Create eye-catching hero sections and page backgrounds. Export as WebP using our PNG to WebP converter for faster loading.
Design Instagram posts, Twitter headers, and YouTube thumbnails. Use our Social Media Image Resizer for perfect dimensions.
Create professional slide backgrounds. Export as PNG and check the result with our PNG Analyzer.
Design buttons, cards, and navigation elements. Use the CSS output directly in your stylesheets.
PNG: Lossless quality, larger file size. Best for graphics that need editing later. JPG: Smaller files but no transparency. Good for web backgrounds. WebP: Best of both worlds - small files with good quality. SVG: Vector format, infinitely scalable, smallest file size. Use our PNG to JPG or PNG to WebP converters to change formats later.
Yes! All gradients you create are yours to use freely for personal or commercial projects. There are no restrictions or attribution requirements. The CSS code and exported images are completely royalty-free.
For full-screen backgrounds, 1920×1080 works well. For mobile-first design, consider 1280×720. For social media, check specific platform requirements with our Social Media Image Resizer. Using SVG export gives you infinite scalability with the smallest file size.
Add multiple color stops (3-5 works well) and space them evenly across the gradient. Use analogous colors (neighbors on the color wheel) for smooth transitions, or use our AI Color Palette Generator to find harmonious combinations. Avoid placing very different colors too close together.
SVG gradients are vector-based, meaning they scale to any size without losing quality. The file size is typically much smaller than PNG (often under 1KB). They're perfect for responsive web design. However, if you need to use the gradient in software that doesn't support SVG, use our SVG to PNG converter.
Yes! The generated CSS uses modern gradient syntax supported by all current browsers (Chrome, Firefox, Safari, Edge). Linear and radial gradients have 98%+ browser support. Conic gradients work in all modern browsers but may need a fallback for older ones.