Gradient Generator
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.
Create stunning, production-ready CSS gradients without hand-coding. Build linear gradients at any angle using 8 direction buttons or a custom degree slider. Build radial and conic gradients with full control over shape, size, and position. Build repeating variants for tiled pattern effects. Add up to 8 color stops each with an independently set position and opacity. Choose from 25 curated presets across 7 mood categories or click Random for instant inspiration. Export as a CSS background-image property, a Tailwind arbitrary value, or SVG markup. Download a 1200x630 PNG or scalable SVG. All processing is 100% in-browser. No account required.
How to Use
- 1Choose a gradient type: Linear, Radial, Conic, Repeating Linear, or Repeating Radial
- 2For linear gradients, drag the Angle slider or click one of the 8 direction buttons (↑ ↗ → ↘ etc.)
- 3For radial gradients, select a shape (Circle or Ellipse), a size keyword, and adjust Center X / Y sliders
- 4For conic gradients, set the start angle and center position
- 5Click a color swatch to open a color picker, then drag the position slider to place that stop along the gradient
- 6Use the α slider per stop to add transparency - values below 100% output rgba() colors
- 7Click 'Add Stop' to insert up to 8 stops; click the trash icon to remove any stop
- 8Browse the Presets section - filter by mood (Warm, Cool, Nature, etc.) and click any swatch to apply it
- 9Hit Random for an instant random gradient
- 10Copy your code from the CSS, background-image, Tailwind, or SVG tabs - or download as a PNG or SVG file
Features
- 5 gradient types: linear, radial, conic, repeating-linear, repeating-radial
- 25 curated presets across 7 moods: Warm, Cool, Nature, Vibrant, Pastel, Dark, Special
- Up to 8 color stops per gradient
- Per-stop opacity (alpha) control for transparent and glass-morphism effects
- 8 quick-direction buttons for linear gradients (↑ ↗ → ↘ ↓ ↙ ← ↖) plus full 0–360° slider
- Radial controls: shape (circle/ellipse), size keyword, and X/Y center positioning
- Conic controls: start angle and X/Y center positioning
- Live gradient bar visualization showing all stops and their positions
- 3 preview shapes: wide banner (16:9), square, and circle
- Random gradient generator
- 4 code output formats: CSS background, background-image, Tailwind arbitrary class, SVG markup
- PNG download (1200×630) rendered via Canvas API
- SVG file download - scalable at any resolution
- 100% browser-based - no data sent to any server
Frequently Asked Questions
Community Feedback
Like
Total Rating
No ratings yetReviews
No reviews yet. Be the first!
Rate & Review
Was this tool helpful?
Rate this tool:
Write a Review