CSS Gradient Generator
Last updated: 2026-06-25
The CSS Gradient Generator takes start and end colors plus an angle and produces linear-gradient (or radial-gradient) CSS code with a live preview.
Example: background: linear-gradient(90deg, #14b8a6, #0f172a); — grab it instantly with the copy button.
Gradient settings
Preview
CSS code
The generated code is a CSS background property value. If you need legacy browser support, also include a solid background as a fallback.
How to use
- Set colors — Set the start and end colors with the color picker or HEX input.
- Choose angle & type — Pick linear or radial; for linear, set the angle from 0 to 360 degrees.
- Copy the code — Check the preview, then copy the generated background CSS code and use it.
Understanding CSS gradient angles and types
CSS linear-gradient() changes color in a straight line based on an angle (deg). 0deg runs from bottom to top, and 90deg runs from left to right. Increasing the angle rotates it clockwise.
| Angle | Direction | Example use |
|---|---|---|
| 0deg | Bottom → top | Bottom-anchored background |
| 90deg | Left → right | Horizontal banners and buttons |
| 135deg | Top-left → bottom-right diagonal | Hero sections, cards |
| 180deg | Top → bottom | Top header shading |
| radial | Center → outward | Lighting and circular highlights |
The same two colors can feel very different depending on the angle. A diagonal (135deg) gradient adds depth and dimension, so it is popular for hero sections. If the lightness difference between the start and end colors is too large, text readability can suffer, so check text over a gradient with the contrast checker.
Frequently Asked Questions (FAQ)
How is the CSS gradient angle defined?
In linear-gradient, 0deg runs from bottom to top, and 90deg runs from left to right. Increasing the angle rotates the gradient direction clockwise.
What is the difference between linear-gradient and radial-gradient?
linear-gradient changes color in a straight line along the given angle, while radial-gradient spreads color outward in a circle from the center. Linear is common for buttons and banners; radial suits lighting effects and circular highlights.
Where do I paste the generated code?
The copied code is the value of the CSS background property. For example: .hero { background: linear-gradient(90deg, #14b8a6, #0f172a); } — paste it into the selector you want.
Do gradients work in all browsers?
linear-gradient and radial-gradient are supported without prefixes in all modern browsers. If you must support very old browsers, it is safest to also specify a solid background as a fallback.
Related tools & guides
Last updated: 2026-06-25