Hero sections
Give a landing page banner a soft brand-coloured background.
CSS Gradient Generator
Pick colours, drag the stops and copy ready CSS.
Your files stay with you. Your files never leave your browser. This tool runs on your device: nothing is uploaded to our servers, so there is nothing for us to store or see.
How to use it
- Choose a type and start from a preset if you like.
- Set the angle and adjust the colour stops.
- Copy the CSS into your stylesheet.
Where it helps
Buttons and badges
Make offer buttons and labels stand out.
Social graphics
Design a background to screenshot for posts and thumbnails.
Good to know
Stays in your browser
Everything is worked out on your device and never sent to our servers.
Check text contrast
Make sure text stays readable across the whole gradient.
Add a fallback colour
Set a plain background colour before the gradient.
Questions people ask
How do you make a CSS gradient background?
Choose linear, radial or conic, start from a preset such as Sunset or Ocean if you like, set the angle and adjust two to five colour stops, watching the live preview. Then copy the background line into your stylesheet or download gradient.css. Linear and radial gradients work in every browser, and conic in all current ones.
- 3 Types. Linear, radial, conic.
- 2-5 Colour stops. Add or remove.
- Presets Sunset, Ocean. And more.
- Copy One line of CSS. Or download.
How do I make a gradient background in CSS?
Copy the generated line, for example background: linear-gradient(135deg, #FF6A00 0%, #FF2D6F 100%);, into the CSS rule of the element, such as a section or button. The gradient fills the element's background and scales to its size. Add a plain background colour first as a fallback.
What is the difference between the three types?
Linear changes colour along a straight line at an angle, which suits banners and buttons. Radial spreads from a centre point outwards, good for spotlights and glows. Conic sweeps around a centre like a pie chart or colour wheel, which suits charts, loaders and decorative shapes.
How many colours can I use?
Two to five stops in this tool, which covers almost every design. CSS itself allows many more, so you can add extra stops by hand in the copied code. Fewer colours usually look cleaner: two or three related colours make the most professional gradients. Start with two.
Do all browsers support it?
Linear and radial gradients work in every browser in use today, including older phones. Conic gradients work in all current browsers. If you need to support very old browsers, set a solid background colour before the gradient line so they show a sensible colour instead.
What does the angle mean?
For linear gradients the angle sets the direction: 0deg goes from bottom to top, 90deg from left to right and 180deg from top to bottom. 135deg runs diagonally from the top left to the bottom right, a popular choice for banners. Drag the angle and watch the preview change.
What do the stop positions do?
Each stop's position, as a percentage, says where its colour is reached. Moving two stops close together makes a sharp change; spreading them out makes a soft blend. Putting two stops at the same position creates a hard line, which you can use for stripes and two-tone effects.
How do I keep text readable on a gradient?
Check the contrast of your text against both ends of the gradient with the colour converter. If one end is too light for white text, darken it, or add a semi-transparent dark layer behind the text. Readable text matters more than a striking gradient. Test on a phone too.
Can I use a gradient for text?
Yes, with a little extra CSS: set the gradient as the background, then add background-clip: text and a transparent text colour. Keep it to large headings, check it in several browsers and make sure the words are still readable when the gradient is pale. Keep a solid fallback colour.
Are gradients better than background images?
For simple colour blends, yes. A CSS gradient is a line of code instead of an image file, so it loads instantly, stays sharp on every screen and resizes with the element. Use images when you need texture, photos or detailed artwork. They also adapt to any screen size.
How do I make a gradient with my brand colours?
Type or pick your brand colour as the first stop, then choose a lighter, darker or neighbouring colour for the second. The colour converter's HSL values help: keep the hue similar and change the lightness. Subtle brand gradients look more polished than strong rainbow ones.
What are the presets for?
Presets such as Sunset, Ocean, Dusk, Fresh, Spotlight and Colour wheel give you a starting point for each type. Pick one, then change the colours and angle to suit your design. They're also a quick way to see what radial and conic gradients can do.
Can I use gradients in email templates?
Many email apps, including some versions of Outlook, don't support CSS gradients. Always set a solid background colour as well, so the email still looks right where the gradient is ignored. For important emails, test in the main apps your customers use. Solid colours are the safe choice.
Is anything uploaded?
No. The gradient is built and previewed in your browser, and nothing is sent to our servers or stored. Copy or download the CSS before closing the tab. You can design as many gradients as you like without an account or any limit. Nothing remains after you close it.
Does it work on a phone?
Yes. Tap a type or preset, adjust the stops and angle with sliders and copy the CSS. Fine adjustments are easier with a mouse, but the preview works well on a phone, and it's handy for checking how a gradient looks on a small screen too.
Is the CSS gradient generator free?
Yes. It's free with no sign-up and no limit on use. It's one of the free developer tools from Marketiism, along with the colour converter and the box shadow and border radius generators. Marketiism builds Marketiism for small businesses. Use it as often as you need, for any project.
Want this inside your own account?
Marketiism keeps your invoice numbers, GST reports, UPI payment links and WhatsApp reminders in one place. Leave your details and we'll call to set it up for your business, or start the trial yourself.
More Developer tools
CSS Box Shadow Generator
Design layered box shadows with sliders and copy the CSS.
CSS Border Radius Generator
Round the corners of a box with sliders and copy the border-radius CSS.
Colour Converter
Convert colours between HEX, RGB and HSL, and check contrast against white and black.
JSON Formatter
Format, validate and minify JSON, and see exactly which line has a mistake.
JSON to CSV
Turn a JSON list of records into CSV for Excel or Google Sheets.
CSV to JSON
Convert CSV rows into a JSON list, with numbers and true/false detected.