CSS Gradient Generator - Create Beautiful Gradients Instantly
Free online CSS gradient generator with live preview. Create stunning linear and radial gradients, customize colors and positions, and copy CSS code instantly for your web projects.
Gradient Preview
Gradient Settings
CSS Code
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Pro Tips
- • Use 2-3 colors for subtle, professional gradients
- • Add color stops in the middle for more complex effects
- • Radial gradients work great for spotlight effects
- • Consider using CSS variables for easy theme switching
What is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors, created using CSS without requiring image files. Gradients are defined using CSS functions like linear-gradient() and radial-gradient(), which allow you to create beautiful color transitions that enhance your web design while keeping file sizes small and load times fast.
CSS gradients are widely supported across all modern browsers and offer significant advantages over traditional image-based gradients, including better performance, scalability, and easier maintenance. They're perfect for backgrounds, buttons, overlays, and decorative elements.
How to Use the CSS Gradient Generator
- Choose Gradient Type: Select between linear (directional) or radial (circular) gradient
- Set Direction: For linear gradients, choose the angle or direction (top to bottom, left to right, etc.)
- Add Colors: Click on color stops to change colors, or add new color stops for more complex gradients
- Adjust Positions: Move color stops to different positions (0-100%) to control where colors transition
- Preview in Real-Time: See your gradient update instantly as you make changes
- Copy CSS Code: Click the "Copy CSS Code" button to copy the generated CSS to your clipboard
- Use in Your Project: Paste the CSS code into your stylesheet or inline styles
Pro tip: Start with one of our preset gradients and customize it to match your brand colors for quick, professional results.
Types of CSS Gradients
Linear Gradients
Linear gradients transition colors along a straight line in any direction. You can specify the angle (0deg to 360deg) or use keywords like "to right", "to bottom", or "to top right". Linear gradients are perfect for backgrounds, headers, and creating depth in UI elements.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Radial Gradients
Radial gradients radiate from a center point outward in a circular or elliptical shape. They're ideal for creating spotlight effects, vignettes, or circular design elements. You can control the shape (circle or ellipse) and the position of the center point.
background: radial-gradient(circle, #667eea 0%, #764ba2 100%);Gradient Examples and Use Cases
1. Hero Section Background
Create an eye-catching hero section with a subtle gradient that draws attention to your content:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);2. Button Hover Effect
Add depth to buttons with a gradient that changes on hover:
background: linear-gradient(to right, #f12711 0%, #f5af19 100%);3. Card Overlay
Create a subtle overlay on images or cards for better text readability:
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);4. Spotlight Effect
Use radial gradients to create a spotlight or vignette effect:
background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.8) 100%);5. Multi-Color Gradient
Combine multiple colors for vibrant, modern designs:
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #ff9ff3 100%);Best Practices for CSS Gradients
- Use 2-3 Colors: Limit your gradient to 2-3 colors for a clean, professional look. Too many colors can appear chaotic.
- Consider Color Theory: Use complementary or analogous colors for harmonious gradients. Avoid high-contrast combinations that may strain the eyes.
- Test Accessibility: Ensure text on gradient backgrounds maintains sufficient contrast for readability (WCAG AA standard: 4.5:1 for normal text).
- Optimize Performance: CSS gradients are more performant than image files, but complex gradients with many color stops can impact rendering speed.
- Use Fallback Colors: Always provide a solid background color as a fallback for older browsers that don't support gradients.
- Subtle is Better: Subtle gradients often look more professional than dramatic color transitions. Start subtle and increase intensity if needed.
- Match Your Brand: Use your brand colors in gradients to maintain consistency across your design.
- Test on Different Screens: Gradients can appear differently on various displays. Test on multiple devices to ensure consistency.
Advanced Gradient Techniques
Repeating Gradients
Create striped patterns using repeating-linear-gradient() or repeating-radial-gradient():
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);Multiple Gradients
Layer multiple gradients for complex effects by separating them with commas:
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%);CSS Variables for Themes
Use CSS custom properties to create easily switchable gradient themes:
--gradient-start: #667eea;
--gradient-end: #764ba2;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));Frequently Asked Questions
What browsers support CSS gradients?
CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For older browsers (IE9 and below), you should provide a solid color fallback. The syntax has been standardized since 2012, so vendor prefixes are no longer necessary for most use cases.
How do I create a transparent gradient?
Use RGBA or HSLA color values with varying alpha (transparency) values. For example: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%) creates a gradient from opaque white to fully transparent.
Can I animate CSS gradients?
CSS gradients cannot be directly animated with CSS transitions or animations. However, you can achieve animated gradient effects by animating the background-position of a larger gradient, using pseudo-elements with opacity transitions, or by animating CSS custom properties that define gradient colors.
What's the difference between deg and turn units?
Degrees (deg) range from 0 to 360, where 0deg points upward and increases clockwise. Turns (turn) are a full rotation, where 1turn equals 360deg, 0.25turn equals 90deg, etc. You can also use keywords like "to right" (90deg), "to bottom" (180deg), or "to top right" (45deg).
How many color stops can I use?
There's no strict limit on color stops, but for performance and visual clarity, it's best to use 2-5 color stops. More color stops increase complexity and can impact rendering performance, especially on mobile devices. Most professional gradients use 2-3 colors.
Can I use gradients on text?
Yes! Use background-clip: text and -webkit-background-clip: text with color: transparent to apply gradients to text. Example: background: linear-gradient(90deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;