CSS Gradient Generator

This generator builds a two-colour CSS linear-gradient() from a start colour, an end colour and a direction, then shows a preview strip and a ready-to-paste background declaration. It is for front-end developers and site builders who want a smooth header, button or card background without exporting an image.

From options to code

The three settings map directly onto the CSS:

• Start color and End color: hex codes, three- or six-digit, with or without the #. They are normalised to lowercase six-digit form, so #EC4899 becomes #ec4899 and fff becomes #ffffff.
• Direction: Diagonal ↘ writes 135deg, Left → Right writes to right, Top → Bottom writes to bottom, and Diagonal ↗ writes to top right.

With #6d48f5, #EC4899 and Left → Right, the output is:

background: linear-gradient(to right, #6d48f5, #ec4899);

Paste it inside any rule, for example .hero { background: linear-gradient(135deg, #6d48f5, #ec4899); }. Because background is a shorthand, it resets any background colour or image set earlier in the same rule; use background-image instead if you need to keep those.

Angles versus corner keywords

In CSS gradients, 0deg points up, 90deg points right and 180deg points down, so 135deg runs toward the bottom-right corner at that exact angle whatever the element's shape. Corner keywords behave differently: to top right adjusts its angle to the box's proportions so the colours line up with the corners, which means it is much flatter than 45° on a wide banner. to right equals 90deg, and to bottom equals 180deg, which is also the default when no direction is given.

Editing the result by hand

The tool produces two colour stops, but the syntax is easy to extend once you have copied it:

• A third colour: linear-gradient(135deg, #6d48f5, #a855f7 50%, #ec4899). A middle stop also helps when two distant hues blend into a dull, greyish band in the centre.
• Hard edges: repeating a position creates a sharp split, as in linear-gradient(to right, #6d48f5 50%, #ec4899 50%).
• Shifting the blend: positions such as #6d48f5 20% hold the first colour solid for the first fifth before blending starts.

Keeping text readable on a gradient

Text over a gradient has to work against every colour behind it, so test it against both ends. White text on #6d48f5 scores 5.39:1, which passes WCAG AA, but on #ec4899 it drops to 3.53:1, enough only for large text. Check each end in the Color Contrast Checker, and darken the lighter end if body text will sit on it.

What the generator does not make

It creates linear gradients only, with exactly two opaque colours. Radial and conic gradients, transparency, multiple layers and animated backgrounds need to be written by hand. Vendor prefixes such as -webkit- are not added because every current browser supports the unprefixed syntax.