Create stunning linear, radial and conic CSS gradients with a live preview. Copy CSS or Tailwind code in one click — completely free.
Pick your colours using the colour swatches, drag the sliders to position each colour stop, and choose your gradient type — linear, radial, or conic. The live preview updates instantly so you can see exactly what your gradient will look like on a real element. When you're happy with the result, switch between CSS and Tailwind output, then click Copy Code and paste it straight into your project.
A linear gradient creates a colour transition along a straight line. You define the direction with an angle — 0deg goes upward, 90deg goes to the right, and 180deg goes downward. Diagonal angles like 135deg are popular in modern design because they create a dynamic, flowing feel. Linear gradients are the most widely used type and work brilliantly for page backgrounds, hero sections, buttons, and card overlays.
The CSS syntax is straightforward: background: linear-gradient(135deg, #667eea, #764ba2);. You can add as many colour stops as you need, and control exactly where each colour begins and ends by specifying percentage positions.
A radial gradient transitions colours outward from a central point. You can choose between a circle or ellipse shape, and position the centre anywhere on the element. Radial gradients are excellent for spotlight effects, glowing elements, soft vignettes, and creating the illusion of depth in your designs.
The syntax uses radial-gradient() instead of linear-gradient(), with the shape specified before the colour stops: background: radial-gradient(circle, #667eea, #764ba2);.
A conic gradient sweeps colour transitions around a central point, similar to the hands of a clock. Created with conic-gradient(), they are useful for pie charts, colour wheels, gauges, and creative decorative effects. The starting angle can be customised with the from keyword, e.g. conic-gradient(from 90deg, red, blue).
Stick to two or three colours for clean, professional results. Colours that sit adjacent on the colour wheel — known as analogous colours — produce the smoothest transitions. If you want bold, energetic gradients, try complementary colours that sit opposite each other on the wheel. Adjusting the colour stop positions gives you fine control: pulling stops closer together creates a sharper transition, while spreading them apart produces a gentler blend.
For a more natural feel, avoid pure black and white as gradient endpoints. Instead, use very dark or very light tints of your primary colours. This keeps the gradient feeling rich rather than flat. You can also use the transparent keyword as a colour stop to create fade-in and fade-out effects — particularly useful for overlaying gradients on images.
If your project uses Tailwind CSS, you can apply gradients using utility classes. Use bg-gradient-to-r for left-to-right, bg-gradient-to-br for top-left to bottom-right, and so on. Then specify colour stops with from-[colour], via-[colour], and to-[colour]. For custom hex colours, use Tailwind's arbitrary value syntax, e.g. from-[#667eea]. This generator outputs the correct Tailwind classes automatically.
linear-gradient(), radial-gradient(), and conic-gradient().background or background-image property. For example: background: linear-gradient(135deg, #667eea, #764ba2);. No images are needed, which means faster load times and sharper rendering at any screen resolution.bg-gradient-to-r for direction (r, l, t, b, tr, tl, br, bl), then from-[colour], via-[colour], and to-[colour] for your colour stops. For custom hex colours, use arbitrary values like from-[#667eea]. This generator produces the correct Tailwind classes automatically.conic-gradient(), they're useful for pie charts, colour wheels, gauges, and decorative effects. You can set a starting angle with the from keyword.rgba() or hsla() colour values with an alpha channel, or use the transparent keyword as a colour stop. For example: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)) creates a fade from fully transparent to solid red. This is great for overlaying gradients on images.@property CSS rule to register custom properties as colours, allowing smooth transitions. Alternatively, create an oversized gradient and animate background-position to create a shifting effect.135deg (top-left to bottom-right diagonal — feels modern and dynamic), 90deg (left to right), 180deg (top to bottom — the default), and 45deg (diagonal upward). Diagonal angles generally feel more energetic than horizontal or vertical ones.