Explore Tools →
Utility • Free • No sign-up

CSS Gradient Generator — Design Gradients Free Online

Design a two-colour CSS gradient — pick colours and direction, preview it live, and copy the ready CSS code into your site.

Gradient Generator

Design a two-colour CSS gradient — pick colours and direction, preview it, and copy the code.

background: linear-gradient(90deg, #0b7a55, #0e1b16);

How to use it

  1. Pick two colours.
  2. Choose the direction.
  3. Copy the CSS from the box and paste it into your stylesheet.

Frequently asked questions

What is a CSS gradient?

A smooth blend between two or more colours, made with background: linear-gradient(...) — no image file needed.

Where can I use a gradient?

Buttons, headers, hero sections, cards and backgrounds — anywhere you want a modern, colourful look.

Can I add a third colour?

This tool makes two-colour gradients. For three or more, copy the CSS and add a third colour stop in the middle.

Does it work in all browsers?

Yes — linear-gradient is supported by every modern browser.

Related tools

More free tools from ToolsOwl — all browser-only, all safe.

VideoMy Video Inspector & Frame GrabberResolution, duration, size + 3 still frames from your own video.VideoVideo Link CheckerValidate a link, identify platform & ID, see the legal options.VideoFacebook Embed Code MakerOfficial embed code for a public Facebook video on your blog.

This tool never downloads other people's Facebook, TikTok or Instagram videos. It works only on files and text you provide. See our official download-your-own-video guide.

Copied