CSS Gradient Generator
Design linear, radial, and conic CSS gradients. Copy code easily and save your favorite gradient presets.
What is the CSS Gradient Generator?
The CSS Gradient Generator is a visual design tool for creating linear, radial, and conic CSS gradients. Adjust color stops, angles, and positions with a live preview and get ready-to-paste CSS code instantly. Save your favorite gradients locally in the browser for future use.
Gradient Types
↗ Linear Gradient
Colors transition in a straight line at any angle. Used for backgrounds, buttons, and text fills. The most common gradient type.
⭕ Radial Gradient
Colors radiate from a center point outward in a circle or ellipse. Great for spotlight effects, glowing buttons, and circular elements.
🔄 Conic Gradient
Colors rotate around a center point like a color wheel. Useful for pie charts, loading spinners, and artistic backgrounds.
Common Use Cases
- Create gradient backgrounds for hero sections, cards, and buttons
- Design gradient text effects using
background-clip: text - Generate pie chart visualizations using conic gradients
- Create glassmorphism effects with subtle transparency gradients
- Design loading skeletons with animated repeating gradients
- Build gradient borders using
border-image
Frequently Asked Questions
What does "Repeating" do?
Enabling "Repeating" wraps the gradient pattern across the element, creating a striped or tiled effect. It uses repeating-linear-gradient, repeating-radial-gradient, or repeating-conic-gradient.
How do I use the copied CSS?
Paste the copied CSS rule directly into your stylesheet. For example: .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
Are my saved gradients stored privately?
Yes — saved favorites are stored in your browser's localStorage and are never sent to any server. They persist across sessions on the same device and browser.