DevUtilX

CSS Gradient Generator

Create linear & radial CSS gradients with multiple color stops and preview the result live.

90°
%
%
%

Live Preview

Preview

Generated CSS

#020024
(0%)
#090979
(50%)
#00d4ff
(100%)

How to Use the CSS Gradient Generator

  1. Choose Linear or Radial gradient type.
  2. For linear gradients, adjust the angle; for radial, pick a shape.
  3. Add, remove, and reorder color stops. Use the color picker to change colors and the percent input to set stop positions.
  4. Preview updates live. Click Copy CSS to copy ready-to-use CSS for your site.
  5. Use the Copy with fallback button to include a solid fallback color and the `background-image` line.

💡 Pro Tip: For smooth gradients, evenly space stops and pick colors with similar luminosity. Use radial gradients for spotlight effects.