%
%
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
How to use
01
Pick a gradient type
Linear, radial, or conic.
02
Add color stops
Up to 6 colors with custom positions.
03
Copy the CSS
One click to copy the background property.
Why Gradient Preview
- All three modern gradient types in one place.
- Live preview updates as you tweak.
- Outputs standards-compliant CSS.
Common questions
Is Gradient Preview free to use?
Yes. Gradient Preview is completely free. There is no sign up, no trial, and no usage cap.
Do I need an account to use Gradient Preview?
No. You can start using Gradient Preview straight away. We do not ask for an email address or a login.
Is my data uploaded to a server when I use Gradient Preview?
No. Gradient Preview runs entirely inside your browser, so the colors you enter never leaves your device and nothing is sent to us.
Do you store the colors I use with Gradient Preview?
No. Because everything happens locally in your browser, there is nothing for us to store. Close the tab and it is gone.
Can I copy colors as HEX, RGB, or HSL?
Yes. Gradient Preview shows colors in the common formats and lets you copy the value you need with one click.
Can I use the colors from Gradient Preview in my design tool?
Absolutely. Copy the value and paste it into Figma, your code, or any other app.
How do I use Gradient Preview?
Enter or paste your colors and Gradient Preview updates the result as you go. When it looks right, copy or download it with one click.
Does Gradient Preview work on phones and tablets?
Yes. Gradient Preview is responsive and works in any modern browser on mobile, tablet, and desktop.
Which browsers does Gradient Preview support?
It works in current versions of Chrome, Firefox, Safari, and Edge. For the best experience, keep your browser up to date.
Is there a limit on how often I can use Gradient Preview?
No. You can use Gradient Preview as many times as you need, at no cost.
Can I use Gradient Preview for commercial or client work?
Yes. You are free to use the output in personal, educational, and commercial projects.
Why is Gradient Preview free?
The site is supported by advertising, which lets us keep every tool free and open to everyone.
What should I do if Gradient Preview gives an unexpected result?
First check that your colors is formatted as expected. If something still looks wrong, use the feedback link on the page and we will take a look.