Live Preview
CSS Code
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #ee5a6f 100%);Color Stops
%
%
%
Fast, accurate, and reliable
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #ee5a6f 100%);Generate stunning CSS gradients with our free online gradient generator. Create linear, radial, and conic gradients with unlimited color stops. Get instant CSS code, preview in real-time, and download as PNG or SVG. Perfect for web designers and developers who need beautiful gradients for websites, backgrounds, and UI designs.
Linear, radial, and conic gradients with full control over angle, shape, and position.
Add unlimited color stops, adjust positions, randomize colors, or reverse gradient direction.
Copy CSS code, download as 1200x630 PNG for social media, or export as scalable SVG.
Create gradients visually without writing code. See live preview as you adjust colors, positions, angles, and shapes. No need to remember complex CSS syntax—just pick colors and copy the code.
Generate linear, radial, or conic gradients. Each type has unique controls for maximum flexibility and creative possibilities.
Start with curated gradient presets designed by professionals. Load a preset and customize it, or use as inspiration for your own gradients.
Get your gradient in multiple formats. Copy CSS code for web development, download PNG for social media backgrounds, or export SVG for scalable graphics.
Fine-tune every aspect of your gradient with advanced tools. Randomize for inspiration, reverse direction, or adjust individual color stops precisely.
Select Linear for standard top-to-bottom or angled gradients (most common),Radial for circular center-outward gradients (great for spotlights), orConic for pie-chart-style rotating gradients.
Click the color picker to choose colors, or enter hex codes directly. Adjust the position percentage (0-100%) to control where each color appears. Click + Add to add more color stops for complex multi-color gradients. Click the trash icon to remove a stop.
For Linear gradients, use the angle slider (0-360°) to rotate the gradient direction. For Radial gradients, choose Circle or Ellipse shape and set position (center, top, corners). For Conic, adjust rotation angle and center position.
Browse the 8 preset gradients at the bottom. Click any preset to load it instantly. Presets include Purple Bliss, Sunset, Ocean, Forest, Fire, Cotton Candy, Royal, and Rainbow. After loading a preset, customize colors and settings to make it your own.
Click Copy CSS to copy the background: linear-gradient(...) code to your clipboard. Paste it directly into your CSS file or style tag. Or click PNGto download a 1200x630 image, or SVG to export a scalable vector graphic.
Create beautiful gradient backgrounds for hero sections, headers, and full-page layouts. Linear gradients work great for modern website designs and landing pages.
Design gradient buttons, cards, and overlays. Subtle gradients add depth to UI elements without distracting from content. Perfect for call-to-action buttons.
Download 1200x630 PNG gradients for Open Graph images, Twitter cards, and Instagram posts. Create branded gradient backgrounds for quotes and announcements.
Understand how CSS gradients work by experimenting with the visual editor. See how angle, color stops, and positions affect the final result. Great for teaching and learning.
Linear gradients transition colors in a straight line, controlled by angle (0-360°). Common examples: top-to-bottom (180°), left-to-right (90°), diagonal (45° or 135°).Radial gradients transition from a center point outward in a circle or ellipse, like a spotlight effect. Conic gradients rotate colors around a center point like a color wheel or pie chart. Linear is most common for backgrounds, radial for spotlight effects, and conic for creative designs.
You can add unlimited color stops. However, most gradients use 2-4 colors for clean, readable designs. Our presets range from 2 colors (Purple Bliss, Ocean) to 7 colors (Rainbow). For web performance, stick to 2-5 color stops. CSS gradients require a minimum of 2 color stops, so you cannot delete a color stop if only 2 remain.
Common angles: 180° (top to bottom, most popular), 90° (left to right), 0° (bottom to top), 135° (diagonal top-left to bottom-right), 45° (diagonal bottom-left to top-right). For hero sections, 180° or 135° work best. For sidebar accents, try 90°. Experiment with the angle slider to find what looks best for your design.
Yes! CSS gradients are fully supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2012. No vendor prefixes needed for gradients anymore. The generated CSS code works in production without modification. Browser support: Chrome 26+, Firefox 16+, Safari 7+, Edge 12+. For very old browsers (IE9), gradients will not display but background will default to solid color.
To create transparent gradients, use colors with alpha transparency. In the hex color input, enter an 8-digit hex code where the last 2 digits control opacity: #667eeaFF is fully opaque, #667eea00 is fully transparent. Or use the color picker which supports alpha. Transparent gradients are perfect for overlays on images, fading elements out, or creating glass-morphism effects.
Our PNG export is 1200x630 pixels, which is the optimal size for Open Graph images (Facebook, LinkedIn, Twitter cards) and social media posts. This 1.91:1 aspect ratio works across all platforms. For Instagram posts, you may want to crop to 1080x1080 (square) or 1080x1350 (portrait). For Twitter headers, use 1500x500. For full-screen backgrounds, export as SVG and scale to any size without quality loss.
backdrop-filter: blur() for modern glass-morphism effects.