How Do I Make a CSS Gradient?
Updated 2026-06-27
To make a CSS gradient, pick a gradient type, choose two or more colors with positions, set an angle, and copy the generated background CSS into your stylesheet. The fastest way to do this without memorizing syntax is the CSS Gradient Generator, which gives you a live preview and copy-ready code as you tweak each setting.
The Three Gradient Types
CSS supports three kinds of gradients, and each creates a different effect:
- Linear runs colors along a straight line at the angle you choose. 0 degrees points up, 90 degrees points right. This is the classic choice for hero sections, buttons, and headers.
- Radial radiates colors outward from the center in concentric rings. It is great for spotlights, glows, and soft vignettes. The angle does not apply to radial gradients.
- Conic sweeps colors around the center like a color wheel, starting from a chosen angle. It is perfect for pie-chart looks, loading spinners, and bold backdrops.
In the CSS Gradient Generator you switch between all three with a single click, and the live preview redraws instantly so you can compare them.
Working With Color Stops
A color stop is one color plus its position along the gradient, written as a percentage from 0 to 100. Two stops give you a simple A-to-B blend. Adding more stops lets you build sunrise skies, rainbows, or sharp color bands.
- Enter colors as hex values (#rgb or #rrggbb) or use the built-in color picker.
- Set each stop position to control where one color hands off to the next.
- Place two stops at the same position to create a hard edge instead of a smooth blend.
- A minimum of two stops is required; invalid hex values are flagged and skipped in the output.
Setting the Angle
For linear gradients the angle is the direction the colors flow. For conic gradients it is the start angle of the sweep. Drag the slider from 0 to 360 degrees and watch the preview rotate. A 135-degree linear gradient (top-left to bottom-right) is a popular, natural-looking default. Remember that radial gradients ignore the angle entirely.
Copy and Paste the CSS
Once the preview looks right, the tool gives you two ready-to-paste snippets:
- A background declaration, for example background: linear-gradient(135deg, #6ea8fe 0%, #b388ff 100%);
- A background-image declaration, which is handy when you want to layer a gradient over other background properties.
Each has its own copy button. You can also start from a preset such as Twilight, Sunset, Aurora, Ocean, or Spectrum and adjust from there. If you need to convert a color between hex, RGB, and HSL before adding it as a stop, the Color Converter handles that.
Privacy and Convenience
Everything happens locally in your browser. Your colors, stops, and generated CSS are never uploaded to a server, so the tool works offline and keeps your design private. Your last gradient is remembered between visits, so you can pick up where you left off. When you are ready, open the CSS Gradient Generator and start blending.