Code & web

CSS gradient generator

Create a linear or radial gradient and copy the ready-to-use CSS.

Embed this calculator on your website

Copy this code and paste it into your page (WordPress, Wix, Webflow, HTML…). It's free: please keep the link to HOD Calc.

How it works

linear-gradient(angle, colours) or radial-gradient(circle, colours). Accepted colours: #hex, rgb(), hsl() or CSS names.

Results are for guidance only and do not replace professional advice.

Worked example

With the default values:

  • Colour 1#2b50e8
  • Colour 2#e8445e
  • Colour 3 (optional)#ec8a00
  • TypeLinear
  • Angle (degrees)135

you get:

  • Colours#2b50e8 → #e8445e → #ec8a00
  • TipThe first line is a fallback colour

Frequently asked questions

How does the “CSS gradient generator” tool work?

linear-gradient(angle, colours) or radial-gradient(circle, colours). Accepted colours: #hex, rgb(), hsl() or CSS names.

What do I need to enter?

Just fill in: colour 1, colour 2, colour 3, type, angle. The result updates as you type.

Can you give an example?

Colour 1: #2b50e8; Colour 2: #e8445e; Colour 3 (optional): #ec8a00; Type: Linear; Angle (degrees): 135 → Colours: #2b50e8 → #e8445e → #ec8a00; Tip: The first line is a fallback colour.

Is this calculator free, and is my data private?

Yes. HOD Calc is completely free with no sign-up. The calculation runs in your browser: nothing you type is sent or stored.