Gradient Generator
Online CSS gradient generator, create linear and radial gradients, visually adjust and copy code
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);What is CSS Gradient?
CSS Gradient is a smooth transition effect between two or more colors. Linear gradients transition along a straight line direction, while radial gradients spread outward from a center point. Gradients can be used for backgrounds, buttons, cards, and other elements to enhance visual effects.
How to Use
- Select gradient type: Linear or Radial
- Add color stops and adjust each color's position
- Linear gradients can set angle direction, radial gradients can set center position
- Preview gradient effect in real-time
- Click 'Copy Code' to get CSS code
- Select presets to quickly apply common gradients
Common Uses
- Web Backgrounds: Add gradient backgrounds to pages or sections
- Button Styles: Create gradient buttons for visual appeal
- Card Decoration: Add gradient borders or backgrounds to cards
- Brand Colors: Create gradients using brand colors
- UI Design: Quickly generate gradient prototypes for design reference
FAQ
Q: What's the difference between linear and radial gradients?
A: Linear gradients transition colors along a specified angle direction; radial gradients spread outward from a center point, creating a circular diffusion effect.
Q: What does color stop position mean?
A: Position percentage indicates where the color appears in the gradient, 0% is start, 100% is end. For example, colors at 0% and 50% means the first half transitions from first color to second.
Q: How to create multi-color gradients?
A: Click 'Add Color' to add more color stops, each color can have different positions, creating complex gradient effects.
Q: How to use the generated CSS code?
A: After copying, use it as the value for background or background-image property in your CSS, e.g.: .element { background: linear-gradient(...); }