How to Create a CSS Gradient Background
Gradient backgrounds make websites look modern and polished. Here's how to create and customize CSS gradients visually.
Quick Answer
Use the free CSS gradient generator at dotsapps.com. Pick colors, adjust the angle and type, and copy the CSS code. Paste it into your stylesheet — done.
Types of CSS Gradients
CSS supports three gradient types:
- Linear gradient: Colors flow in a straight line — top to bottom, left to right, or any angle. This is the most common type.
- Radial gradient: Colors radiate outward from a center point in a circle or ellipse.
- Conic gradient: Colors sweep around a center point like a color wheel.
Linear gradients work best for backgrounds, headers, and buttons. Radial gradients are great for spotlight effects. Conic gradients create pie-chart-like effects.
How to Build a Gradient Background Visually
Open the CSS gradient generator at dotsapps.com. Select a gradient type (linear, radial, or conic).
Pick your starting and ending colors. The tool shows a live preview as you adjust. Change the angle for linear gradients or the position for radial ones.
Add more color stops for complex gradients. Three or four color stops create smooth, interesting transitions. Too many stops can look muddy.
When the gradient looks right, copy the CSS code and paste it into your stylesheet.
CSS Gradient Code Examples
Here are common gradient patterns you can create:
Simple two-color:
background: linear-gradient(135deg, #667eea, #764ba2);
Sunset effect:
background: linear-gradient(to right, #f12711, #f5af19);
Soft pastel:
background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
Dark modern:
background: linear-gradient(to bottom right, #0f0c29, #302b63, #24243e);
The generator creates this code for you. You just pick the colors and angle.
Tips for Great Gradient Backgrounds
Follow these guidelines for gradients that look professional:
- Limit to 2–3 colors for clean, modern gradients.
- Use colors that are close on the color wheel for smooth transitions.
- Avoid complementary colors in gradients — they create a muddy middle.
- Add subtle gradients to buttons and cards for depth without being distracting.
- Test on mobile — gradients can look different on small screens.
How to Do It: Step-by-Step
- 1
Open the free CSS Gradient Generator at dotsapps.com.
- 2
Select gradient type: linear, radial, or conic.
- 3
Choose your colors and adjust the angle or position.
- 4
Add extra color stops if you want a multi-color gradient.
- 5
Copy the generated CSS code and paste it into your stylesheet.
Frequently Asked Questions
Do CSS gradients work in all browsers?
Yes. CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes needed for current browser versions.
Can I animate a CSS gradient?
Not directly with the background property. But you can animate the background-position of an oversized gradient to create a moving effect, or use CSS @property for color transitions.
What is a gradient angle in CSS?
The angle controls the direction of a linear gradient. 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom, and 45deg goes diagonally.
Can I use a gradient as a text color?
Yes. Use background: linear-gradient(...) with -webkit-background-clip: text and color: transparent. This clips the gradient to the text shape.
Ready to Try It?
CSS Gradient Generator is free, private, and works right in your browser. No sign-up needed.
Open CSS Gradient Generator