CSS Gradient Generator

What this generator does

A CSS gradient generator writes a linear-gradient value you can paste into a stylesheet. This CSS gradient generator is a two-stop tool. You pick a from color, a to color, and a direction. Write CSS emits a single declaration: background: linear-gradient(direction, from, to); The preview uses the same function. Colors come from input type=color, which always yields a six-digit hex value. The page checks that form before it writes CSS so a broken string cannot become a style.

Random colors fills both stops with hex values from crypto.getRandomValues and then writes the CSS. Direction stays as you left it. For a single HEX/RGB/HSL readout without CSS, use the Color Generator.

This is not a mesh gradient, not a conic editor, and not a Photoshop clone. Two stops and six directions are enough for a hero strip or a button fill. Extra stops would be a different product.

How to use

1. Set from and to with the color controls, or use Random colors.
2. Choose a direction: to right, to left, to bottom, to top, 45deg, or 135deg.
3. Write CSS. Copy CSS writes the declaration. Clear empties the output.

Each control has a visible label. Keyboard users can move through the color controls, the list, and the buttons. Enter from the direction list writes CSS.

Example

From #0d82f3, to #7c3aed, direction to right writes background: linear-gradient(to right, #0d82f3, #7c3aed); The preview shows that blend. Changing direction to 45deg rewrites the first argument and updates the preview. The output is ordinary CSS, not HTML. Nothing in the box is executed as a script.

background: linear-gradient(to right, #0d82f3, #7c3aed);

Limits

• Two stops. No midpoints, no repeating-linear-gradient.
• The six directions on the list only.
• Hex stops only. No rgb() stops in the emitted CSS in this batch.
• Work stays in this browser.

Paste the declaration onto a selector you already have. This page will not invent a class name. If the design system uses custom properties, wrap the linear-gradient yourself. The preview is a rectangle, not a live page component.

Random colors can produce a low-contrast pair. That is allowed. Contrast is a reading question, not a syntax question. If the pair is unreadable, generate again or pick the stops by hand.

The CSS is syntactically a standard linear-gradient with a keyword or angle and two hex colors. Browsers that implement CSS Images Level 3 will accept it. Old prefixed variants are not emitted.

to right and to left flip the axis on the inline direction. They do not follow writing-mode in a clever way on this preview; the preview is a simple block. 45deg and 135deg are angles in the CSS gradient coordinate system. If you needed 90deg, use to bottom, which is the same idea for a top-to-bottom blend in ordinary pages.

Clear removes the declaration and hides the preview. It does not reset the color inputs, so you can write again after a mistake without re-picking the stops. Random colors will overwrite those inputs on purpose. Write CSS again after a direction change if the box still shows the previous rule.