CSS Gradient Generator
Build linear, radial, and conic gradients with live preview. Copy the CSS code instantly.
Linear Gradients
A linear gradient transitions colors along a straight line. The angle controls direction — 0deg is bottom-to-top, 90deg is left-to-right, 135deg is diagonal.
You can also use keyword directions: to right, to bottom right, etc.
Radial & Conic
- Radial — Radiates from a center point outward. Supports
circleandellipseshapes. - Conic — Color stops rotate around a center point, like a color wheel or pie chart.
- All three gradient types are supported in all modern browsers (Chrome, Firefox, Safari, Edge).
How to Use
Paste the generated CSS directly into your stylesheet:
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
Use it on any element — div, button, body, pseudo-elements, etc.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors generated entirely by the browser — no image file needed. CSS supports linear-gradient(), radial-gradient(), and conic-gradient().
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle. A radial gradient radiates outward from a center point in a circular or elliptical shape.
How do I use a CSS gradient as a background?
Use the background or background-image property: background: linear-gradient(135deg, #ff6b6b, #4ecdc4). The generated code is ready to paste directly into your CSS.
What is a conic gradient?
A conic gradient rotates color stops around a center point, like a color wheel or pie chart. It is defined with conic-gradient() and supported in all modern browsers.