GradientCraft — Free CSS Gradient Generator for Linear, Radial and Conic Gradients

Angle

Shape

Ellipse Circle

Color Stops

Global Opacity

Reverse gradient direction

Live Preview

Presets

How to Use GradientCraft

Choose a gradient type: Linear, Radial, or Conic.
Add, move, or delete color stops by clicking on the gradient bar.
Adjust the angle (for linear) or position (for radial/conic) gradients.
Browse 30+ presets or build your own, then copy as CSS or Tailwind class.

Why Use a CSS Gradient Generator

CSS gradients are powerful but their syntax — especially multi-stop gradients with specific angles — is tedious to write manually. GradientCraft gives you a visual canvas where you drag color stops and see the gradient update live, making it easy to create the exact effect you envision without writing a single line of CSS by hand.

The 30 built-in presets cover popular design trends: sunset gradients, ocean blues, neon glows, pastel fades, and dark glassmorphism backgrounds. The Tailwind export generates the correct arbitrary value syntax for your Tailwind CSS projects, saving you from remembering the exact format.

Frequently Asked Questions

What is the difference between linear, radial, and conic gradients?
Linear transitions between colors along a straight line. Radial transitions from a center point outward in a circle or ellipse. Conic transitions around a center point like a color wheel.
Can I use more than two colors?
Yes. Add as many color stops as you need by clicking on the gradient bar. Each stop can have its own color and position.
Does the tool support transparency?
Yes. Use colors with alpha values (rgba or hex with opacity) to create gradients that fade to transparent — useful for overlaying on images.