CSS gradient generator

Linear, radial and conic: when to use each

CSS supports three native gradient types. Each solves a different visual problem, and mixing them without judgment is the fastest way to make an interface feel cluttered.

• linear-gradient: the most common one. Great for hero sections, dimensional buttons and headers that need a subtle transition between zones. Defined with an angle (135deg) or a keyword (to right).
• radial-gradient: emulates a light source. Useful for spotlight effects, backgrounds centered on a CTA, screen mocks with a vignette. Accepts a shape (circle or ellipse) and a position (at top left).
• conic-gradient: rotates around a point. The right tool for pie charts, spinners, color pickers and "loading ring" effects without SVG.

Stops: the detail that separates good from great

By default, two colors blend 50/50 linearly. But you can control exactly where each color transitions with stops:

linear-gradient(135deg, #059669 0%, #0ea5e9 60%, #a855f7 100%)

Moving the second color to 60% instead of 50% lets the first dominate more. For hard splits with no blending, place two stops at the same position: #059669 50%, #0ea5e9 50%.

Mesh gradients: the new trend

"Mesh" gradients (Stripe, Vercel-style) aren't a separate CSS property: they're several radial-gradients stacked with transparency. Three or four radials with different colors, positioned in opposite corners, produce that organic effect that's now everywhere on tech landings.

When NOT to use gradients

• Behind long text. They reduce contrast and tire the eyes.
• On secondary buttons. Reserve that visual weight for the primary CTA.
• Animated at 60fps on low-end mobile. Animating background-position can tank frame rate.
• On dense card backgrounds. If you already have shadows, borders and content, the gradient is overkill.

Performance and accessibility

A CSS gradient weighs zero kilobytes and renders on the GPU. Always better than a PNG/JPG. But mind accessibility: if a gradient sits behind text, ensure a 4.5:1 contrast ratio against both the lightest and the darkest stop. When in doubt, layer a solid rgba() overlay between gradient and text.

Copy and export

The generated CSS goes straight into your stylesheet as background: ...;. With Tailwind you can use className="bg-[linear-gradient(...)]". If you'll reuse the gradient across components, store it as a variable: --brand-grad: linear-gradient(...);.