VulCode

CSS gradient

Drag colour stops and get a CSS background and a Tailwind class.

Graphics tools
Category
Graphics
Price
free

The tool starts in your browser.

Everything is calculated in your browser. Nothing you type is sent to our server.

How to use it in three steps

The tool as a schematic with this page's example. Each step's number stands where you take it: in the fields, at the result or outside the tool.

CSS gradient
What you enter
Linear, 90 degrees, three colours

  1. Choose the gradient type and angle.

  2. Add and drag colour stops.

What you get
background: #61cafa; background: linear-gradient(90deg, #61cafa 0%, #2112fc 50%, #1679fa 100%);

  1. Copy the CSS or the Tailwind class.

Eight gradients and the CSS they give

The tool always adds the first colour as a fallback background, and with OKLCH mixing it gives two versions of the gradient: a browser that does not know in oklch keeps the plain one.

SettingExpectedWhat the tool returnsResult
Settinglinear, 90 degrees, three coloursthe example from the tool's description
ExpectedThe first colour as a fallback, then the gradient
What the tool returnsbackground: #61cafa; background: linear-gradient(90deg, #61cafa 0%, #2112fc 50%, #1679fa 100%);
As expected
Settingstops added from the endthe click order
ExpectedColours in the order of position
What the tool returnsbackground: #414df2; background: linear-gradient(90deg, #414df2 0%, #ff5ad1 100%);
As expected
Settingthe first colour at 50%transparency
ExpectedEight hex digits: 50% is 80
What the tool returnsbackground: #414df280; background: linear-gradient(90deg, #414df280 0%, #ff5ad1 100%);
As expected
Setting#fff, #000the short form
ExpectedExpanded to six digits
What the tool returnsbackground: #ffffff; background: linear-gradient(90deg, #ffffff 0%, #000000 100%);
As expected
SettingOKLCH mixinga more vivid blend
ExpectedA plain version and a second with in oklch
What the tool returnsbackground: #414df2; background: linear-gradient(90deg, #414df2 0%, #ff5ad1 100%); background: linear-gradient(90deg in oklch, #414df2 0%, #ff5ad1 100%);
As expected
Settingradial from the centrethe angle does not matter
Expectedradial-gradient(circle at center, ...)
What the tool returnsbackground: #414df2; background: radial-gradient(circle at center, #414df2 0%, #ff5ad1 100%);
As expected
Settinga Tailwind classa value in brackets
ExpectedSpaces turned into underscores
What the tool returnsbg-[linear-gradient(90deg,#414df2_0%,#ff5ad1_100%)]
As expected
Settinga colour typed as a worda wrong format
ExpectedNo CSS, the tool asks for a fix
What the tool returnsNo result
As expected

8 of 8 cases as expected

Questions

Related tools

The tool does one job. If the same thing should happen automatically in your bot, server or system, we build it.

Missing a tool you need?

Tell us what you want to calculate or generate. We will tell you whether a tool is enough or an integration in your system fits better.