inyourbrowser.com

CSS gradient generator

CSS gradient generator is a design tool that builds linear, radial, and conic CSS gradients visually. It supports up to 8 color stops, exposes angle and position controls, and copies the complete background-image value with one click. The tool runs in your browser.

CSS

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

GRADIENT

Type

Angle: 135deg

0deg360deg

Color stops

#3b82f6
0%
#8b5cf6
100%

Dedicated pages

Gradient type and use-case specific generators.

How to create a CSS gradient

  1. Choose a gradient type: linear, radial, or conic.
  2. Add color stops using the color picker and adjust each stop's position with the slider.
  3. For linear and conic gradients, adjust the angle.
  4. Copy the CSS and paste it into your stylesheet.

Common uses

Technical specification

Frequently asked questions

What CSS gradient types does this tool support?
Three types: linear (colors along a straight line), radial (colors spreading outward from a center point), and conic (colors sweeping around a center point). Each type generates standard CSS that works in all modern browsers.
How do I add more color stops?
Click 'Add stop' to add a new color stop. You can add up to 8 stops, each with its own color and position (0 to 100%). Stops are sorted by position before the CSS is assembled.
What does the angle control?
For linear gradients, the angle sets the direction (0deg is top to bottom, 90deg is left to right). For conic gradients, the angle sets the starting point of the sweep. Radial gradients do not use an angle.
Is my data sent to a server?
All CSS generation runs locally in your browser. No data is sent to our servers.

Reviewed and tested May 25, 2026.