Skip to main content

CSS Gradient Generator

Build a two-color linear or radial CSS gradient.

Use CSS Gradient Generator

CSS Code
background: linear-gradient(90deg, #38ef7d 0%, #11998e 100%);

Colors

0%
100%

Popular Presets

edit_note By Meet Dhameliya
update Updated: Oct 24, 2026
schedule 1 min read

Build a two-color linear or radial CSS gradient.

Inputs and results

Input: Two colors, stops, type and linear angle.

Output: Preview and copyable CSS background.

How it works

1

Two colors, stops, type and linear angle.

2

Adjust colors/stops/type/angle and copy the CSS.

Examples

science Example to try

Two colors at 0% and 100%, angle 90 degrees, make a horizontal blend.

Limitations

No multi-stop or animation generation. A preview is not a contrast/accessibility audit.

privacy_tip

Processing & Privacy

Processing uses your browser rather than uploading the supplied input to a processing server. Fonts and tool libraries can make third-party network requests. Optional analytics loads after consent. See the Privacy Policy for site-wide details.

Related Tools

Explore more free ui & design tools on Utility Spark

palette

Color Code Converter

Convert a color and estimate contrast on a background.

Open Tool arrow_forward
html

Meta Tag Generator

Assemble metadata snippets and a text-based search preview.

Open Tool arrow_forward
palette

Image Color Extractor

Sample prominent colors from a supplied image.

Open Tool arrow_forward
markdown

Markdown to HTML Converter

Convert Markdown to HTML source and preview.

Open Tool arrow_forward