urlkit[ CREATE / [↗] ]
CSS gradient generator
Build a two-color linear gradient and copy the ready-to-use CSS.
02 / Your result
Your result will appear here.
Start with your own input or try an example.
What it does
Create a linear gradient for a card, section background, or decorative panel. Choose two opaque colors, set the direction and stop positions, then preview the result in your browser. The output includes a solid-color fallback and a CSS linear-gradient declaration that you can copy or download.
Useful when
- Prepare a subtle background for a landing-page section.
- Create a consistent two-color treatment for a set of cards.
- Compare gradient directions before editing a stylesheet.
How to use it
- Enter two colors using HEX, RGB, or HSL notation.
- Set the angle and each stop position, then generate the preview.
- Copy the background declarations or download a CSS file.
A few useful details
How do CSS gradient angles work?
A linear gradient at 0 degrees points upward, 90 degrees points right, 180 degrees points down, and 270 degrees points left. This tool accepts −3600 to 3600 degrees and normalizes equivalent angles into one turn.
What do the stop positions control?
Each stop is a percentage from 0 to 100 along the gradient. The first position must be no greater than the second. Equal positions create a sharp transition; separating them spreads the blend over that distance.
Can I use transparent colors or more than two stops?
This generator produces two opaque sRGB stops only. It includes a solid background fallback using the first color. You can extend the exported CSS manually; check any text against the full range of background colors before using the gradient behind content.