All tools · Utilities

Gradient

Build a CSS gradient and copy it.

Free to use, no sign-up required. Gradient is one of 198 tools built into Xenition, alongside a chat that can use them for you.

Builds a CSS linear or radial gradient from colour stops and gives you the background line to paste into a stylesheet.

How to use Gradient

1. Choose Linear or Radial, and for linear set the Angle in degrees.
2. Start from one of the six presets, or edit the Stops: a colour and a position from 0 to 100%.
3. Use Add stop for up to six stops, or the bin icon to remove one; at least two are kept.
4. Check the preview, then Copy CSS.

How it works

Stops are sorted by position and written as colour position%. Linear output is linear-gradient(angle deg, stops) and radial output is radial-gradient(circle, stops). A new stop goes halfway between the last two stops and starts with the last colour.

Example

The default stops #1B3A86 at 0% and #F4C430 at 100%, linear at 135°, copy as background: linear-gradient(135deg, #1B3A86 0%, #F4C430 100%); Adding a stop places it at 50% in #F4C430.

Questions about Gradient

Which way does a CSS gradient angle point?

0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom. 135deg runs from the top-left corner towards the bottom-right.

How do I make a hard line instead of a blend?

Give two neighbouring stops the same position, such as red at 50% and blue at 50%. The colour then switches at that point with no fade.

Use it from chat

You do not have to open Gradient to use it. Ask Xenition in plain language and it runs the right tool, then carries the answer into whatever you are working on — a document, a spreadsheet, a deck.

Related tools

• Slope & Line — Slope, distance and midpoint of the line through two points.
• Age Calculator — Exact age and days until your next birthday.
• API Key Generator — Batches of random secret keys — pick bit strength, character set, and prefix.
• Area of Shapes — Area of rectangles, triangles, parallelograms and ellipses.
• Average (Mean) — Mean, median, and mode of a list of numbers.
• Base64 — Encode or decode Base64 text.
• BMI — Body Mass Index from height and weight, metric or imperial.
• Calculator — Quick arithmetic with parentheses and percentages.