Does the builder support radial gradients?

Yes. Toggle radial mode to adjust centre points and create spotlight effects.

Can I export to Tailwind?

Copy Tailwind-ready classes or CSS variables to paste directly into your config.

How do I ensure accessibility?

Use high-contrast text colours and test overlays with real content. Our presets aim for strong contrast, but always verify.

Are gradients stored?

The builder saves only its colour and gradient settings in local storage. The Reset button restores the default design.

Browser tool

Design Gradients with Precision Controls

Layer multiple gradient stops, adjust direction and position, and copy CSS for backgrounds, hero sections, or UI elements.

01 · Colours + direction

Build the gradient

Angle: 90°

Repeating

03 · Generated CSS

linear-gradient(90deg, #327eca 0%, #ff6347 100%)

bg-[linear-gradient\(90deg\,_\#327eca_0\%\,_\#ff6347_100\%\)]

Import JSON

02 · Live gradient

Contrast (center): 4.1:1

Quick instructions

1
Choose gradient type
Switch between linear and radial. The preview updates instantly to reflect the new geometry.
2
Add colour stops
Add stops, set percentage positions, and use native colour inputs or hex values for precise hues.
3
Adjust angle or position
Rotate linear gradients or adjust radial focus points to ensure the highlight lands where you need it.
4
Copy the output
Use the copy buttons to extract standard CSS or a Tailwind arbitrary-value utility.

Examples & tips

Create a sunrise hero

Blend warm and cool tones at a 115° angle and export CSS to update your homepage hero quickly.

Design a shimmering CTA button

Use two close colour stops with slight opacity differences to create a polished button highlight.

Build a chart legend

Generate a left-to-right gradient representing intensity levels and copy it into your CSS variables.

Useful details

Pair gradients with the Image Compressor to optimise exported hero art for production.
Use the Random Prompt Generator for creative themes and translate them into gradients for marketing campaigns.

About this tool

Gradients can elevate a layout when handled carefully. Our builder provides an interactive playground with fine-grained controls and copy-ready CSS so you can move from exploration to production swiftly.

Everything runs in the browser, letting you experiment with brand palettes, UI states, and animation ideas without needing design software.

Questions

Does the builder support radial gradients?: Yes. Toggle radial mode to adjust centre points and create spotlight effects.
Can I export to Tailwind?: Copy Tailwind-ready classes or CSS variables to paste directly into your config.
How do I ensure accessibility?: Use high-contrast text colours and test overlays with real content. Our presets aim for strong contrast, but always verify.
Are gradients stored?: The builder saves only its colour and gradient settings in local storage. The Reset button restores the default design.