Design a smooth background gradient for buttons, banners and whole pages. Pick colours, drag the angle, try presets and copy CSS that works in every modern browser, with a solid fallback colour included.
loading toolHow to make a CSS gradient
- Fill in the boxes or move the sliders.
- Watch the live preview change.
- Copy the finished code into your site.
Good to know
- For text over a gradient, check the contrast at both ends of it.
- Put two stops at the same position (for example 50% and 50%) to get a hard stripe instead of a blend.
Questions
Which browsers support these gradients?
Linear and radial gradients work in every browser in use today. Conic gradients work in all current browsers (Chrome, Edge, Firefox, Safari).
Why is there a plain background line first?
It is a fallback: very old browsers that do not understand the gradient show that solid colour instead of nothing.
Is my data private?
Yes. Everything happens inside your own browser: nothing you type or choose is uploaded to us or anyone else.
Is it free?
Completely free, with no sign-up, no watermark and no limit on how many times you use it. Light ads keep the site running.
