CSS Gradient Generator
Create beautiful CSS gradients with live preview. Generate linear, radial, and conic gradients with unlimited color stops, multiple export formats, and 50+ gorgeous presets.
Gradient Type
Color Stops
2 stops • Minimum 2 stops required
Quick Actions
Export
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Live Preview
3 Gradient Types
Linear, radial, and conic gradients with full control
50+ Presets
Beautiful gradients categorized and ready to use
9 Export Formats
CSS, Tailwind, React, SCSS, and more
PNG & SVG Export
Download gradients as high-quality images
Common Use Cases
Website Backgrounds
Create stunning hero sections and full-page backgrounds
UI Components
Apply to buttons, cards, badges, and more
Text Effects
Create eye-catching gradient text for headlines
Social Media Graphics
Export as images for Instagram, Twitter, Facebook
Frequently Asked Questions
What types of gradients can I create?
You can create three types of gradients: Linear gradients (straight line at any angle), Radial gradients (circular or elliptical from a center point), and Conic gradients (angular sweep like a pie chart). All types support unlimited color stops with position and opacity control.
How do I export my gradient?
Choose from 9 export formats: Standard CSS, CSS Custom Properties, SCSS Variables, Tailwind CSS classes, Styled-components, React inline styles, Text gradient (background-clip), Border gradient, or Animated gradient. You can also export as PNG or SVG images.
Can I share my gradients with others?
Yes! Click the Share button to generate a URL that encodes your gradient configuration. Anyone with the link can view and edit your exact gradient. The gradient history is also saved locally in your browser.
What are the preset gradients?
We provide 50+ professionally designed gradient presets organized into categories: Sunset, Ocean, Fire, Cool, Warm, Nature, Neon, Pastel, Dark, and Vibrant. Click any preset to instantly apply it and customize further.
How does the opacity control work?
Each color stop has an opacity control (0-100%). This allows you to create semi-transparent gradients and complex color transitions. The opacity is converted to RGBA format in the exported code.
What is the difference between a conic gradient and other types?
Conic gradients create a color wheel effect, transitioning colors around a center point in a circular sweep. They are perfect for pie charts, color wheels, and unique visual effects that linear and radial gradients cannot achieve.