CSS gradients is a library of 180 curated linear gradients from webgradients.com, each displayed as a circular preview with one-click CSS copy. All gradients are free for personal and commercial use. The library is a quick starting point when you need a ready-made gradient rather than designing one from scratch.
Navigating the 180 gradients
The top of the page shows a row of 180 small thumbnail squares. Hover any thumbnail to see its name; click to scroll directly to that card. This is faster than scrolling the full page when you already have a style in mind.
Each card also shows the individual hex color swatches that make up the gradient — click any swatch to copy just that color value, without copying the full CSS.
The copied CSS and how to modify it
The code you copy looks like this:
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Common modifications after copying:
/* Change the angle — 0° = bottom to top, 90° = left to right, 180° = top to bottom */
background-image: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
/* Add semi-transparency for image overlays */
background-image: linear-gradient(135deg, rgba(102,126,234,0.8) 0%, rgba(118,75,162,0.8) 100%);
/* Gradient text effect */
background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
For older browser compatibility, add a solid color fallback before background-image:
background: #667eea;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Text readability on gradient backgrounds
Gradients that span a wide lightness range (e.g., white to dark purple) can make overlaid text hard to read at some positions. Adding a semi-transparent dark overlay under the text resolves this without changing the gradient:
background-image:
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
When to use this library vs. the gradient editor
This library provides 180 fixed presets — useful for picking something ready-made. If you need to design a custom gradient from scratch, stack multiple gradient layers, or use modern color spaces like OKLCH, use the CSS gradient editor tool on this site instead.