About CSS Gradients
The CSS Gradient online generator tool is a nice and simple to use utility to quickly generate linear and radial color gradients. You can create the gradients and export the CSS code with colors in HEX or RGB format.Keep reading below to learn more about the different gradient types we support.
Or, get inspired and discover more gradient backgrounds by color: Red gradient backgrounds, Orange gradient backgrounds, Yellow gradient backgrounds, Green gradient backgrounds, Azure gradient backgrounds, Blue gradient backgrounds, Purple gradient backgrounds, Pink gradient backgrounds or Monochrome gradient backgrounds.
Gradient Presets
A curated library of ready-made gradients -- click any preset to see its CSS code or open it in the generator to customize it.CSS Gradients Browser compatibility
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Chrome Android |
|---|---|---|---|---|---|---|---|---|---|
| 10+ | 12+ | 36+ | 26+ | 15.4+ | 12.1+ | 15.4+ | x | 4.4+ | 151+ |
What is a CSS Gradient?
CSS3 gradients let you display smooth transitions between two or more specified colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
CSS defines three types of gradients:
- Linear Gradients (direction down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
- Conic Gradients (rotated around a center point)
Definition from W3Schools
The <gradient> CSS data type denotes a CSS <image> made of a progressive transition between two or more colors. A CSS gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.
There are four kinds of color gradients:
- linear gradients, generated by the linear-gradient() function, where the color smoothly fades along an imaginary line.
- radial gradients, generated by the radial-gradient() function. The more away from an origin a point is, the more far from the original color it is.
- repeating gradients, generated with the repeating-linear-gradient() and repeating-radial-gradient() functions, and which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box.
- conic gradients, generated with the conic-gradient() function, and which transition colors progressively around a circle.
Definition from MDN - Mozilla Developer Network
Explore Gradient Types
The CSS Gradient generator supports four kinds of gradients, each suited to different effects. Pick a type below to learn how it works and see more examples.Linear — The most common gradient type: colors fade smoothly along a straight line, in any direction or angle. Learn more about Linear Gradients →
Radial — Colors radiate outward from a center point in a circle or ellipse — great for spotlights, glows, and badges. Learn more about Radial Gradients →
Repeating — Take a linear or radial gradient and tile it infinitely to build stripes, textures, and patterns. Learn more about Repeating Gradients →
Conic — Colors sweep around a center point like a color wheel or pie chart, instead of radiating outward. Learn more about Conic Gradients →
Text — Apply any gradient directly to text instead of a background, for eye-catching headings and logos. Learn more about Text Gradients →