CSS Gradient

How to use it

1. Choose the gradient type: linear or radial.
2. For linear gradients set the angle in degrees; 90 degrees runs top to bottom.
3. Add color stops with the color pickers. Start with two, click Add color for up to six; stops are spread evenly.
4. Watch the live preview update as you change anything, then copy the finished CSS from the code box.

Common use cases

• Buttons and banners - give call-to-action elements a smooth two-color wash instead of a flat fill.
• Hero section backgrounds - layer a subtle radial glow behind headline text.
• Charts and dashboards - build consistent categorical color ramps for series that need gradient fills.
• Learning CSS - see instantly how angle values and stop positions change the rendered result.

Why it stays private

Colors, angles and stops are combined into a CSS string entirely in your browser; the preview is a plain div with that background. Nothing is uploaded, and the copied code carries no tracking or remote references.

FAQ

Q: Why is the angle box hidden in radial mode? A: Radial gradients spread outward from a center point, so they have no angle. The direction concept only applies to linear gradients, where the angle controls which way the color line runs.

Q: How are the stop positions decided? A: Stops are distributed evenly across the gradient, so three colors sit at 0%, 50% and 100%. For custom spacing, copy the CSS and edit the percentages directly; the syntax is standard and widely documented.

Q: Can I use the output in preprocessors or frameworks? A: Yes. The output is one standard background-image declaration, so it works in plain CSS, inline styles, Sass, Tailwind arbitrary values and CSS-in-JS without modification.