Input
Preparing your workspace…
How to use
- Choose Linear or Radial and set the two colors.
- Adjust the stop positions and, for a linear gradient, the angle.
- Copy CSS and apply the background declaration to your element.
Controlling a CSS gradient
A CSS gradient creates a background from colors rather than a separate image file. It can scale with a card, banner or section while remaining editable in a stylesheet.
This generator focuses on two colors. Use a linear direction or a centered circular radial gradient, then position the stops to control where the transition begins and ends.
Direction and color stops
The angle applies to linear gradients. Radial mode uses a circle centered in the element and has no angle control.
Stop positions run from 0% to 100%. Bringing them closer narrows the transition; placing both at the same position creates an abrupt color boundary.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);A two-stop linear gradient using the displayed colors and angle.
What the preview represents
The preview uses the generated CSS directly. Its proportions can differ from your destination element, particularly for radial gradients.
The first stop cannot come after the second. This editor generates one gradient layer with two colors; additional stops and layers must be added in your stylesheet.
Applying the declaration
The copied output starts with background:. Apply it to the intended selector and check any existing background image, color or shorthand settings that the declaration may replace.
Text input up to 1 MiB. CSS and HTML transformations run in a worker with a 30-second limit. Color tools use sRGB; generated styles are previews and require testing in your own layout.
Frequently asked questions
Can I add a third color?
This workspace supports two stops. Copy the CSS and add more comma-separated color stops manually if your design needs them.
Why is there no angle control in radial mode?
A centered circular radial gradient expands outward from its center. The angle control is relevant only to the linear gradient.
Can I create a hard color split?
Yes. Give both color stops the same position to remove the transition between them.
Is an image file generated?
No. Copy CSS provides a background declaration. The browser draws the gradient when that declaration is used.
Why does the gradient look different on my element?
The destination size and proportions affect the rendered gradient. Check the result on the actual element rather than relying only on the preview card.