Linear gradient
Static worked example — not your live result.
Input
90deg, teal to sky
Output
background: linear-gradient(90deg, #0f766e, #38bdf8);
Generators
CSS Gradient Generator
Design a background gradient and copy the CSS. The CSS Gradient Generator supports linear and radial modes with multiple color stops and a scoped live preview.
How the CSS Gradient Generator Works
Step 1
Configure Gradient
Choose type, colors, and angle or position.
Step 2
Generate CSS
Create the background declaration.
Step 3
Copy CSS
Paste into your stylesheet.
Gradient Features
- Linear and radial modes
- Angle and position controls
- Multiple color stops
- Live preview
- Copy CSS output
Output Details
Input formats
- Options / text inputs
Output formats
- CSS
Supported formats
- CSS
Examples
Frequently Asked Questions
Does the preview match the CSS?
Yes. The preview uses the same generated background value.
Can I use three colors?
Yes. Enable the third color stop.
Is the CSS injected into the whole site?
No. Preview styles are scoped to the preview box.
Related Design Tools
Explore related Tool Base utilities that pair well with CSS Gradient Generator.
Color Palette Generator
New
Generate HEX color palettes with lockable swatches.
Generators
CSS Box Shadow Generator
New
Generate CSS box-shadow with live preview.
Generators
CSS Border Radius Generator
New
Generate CSS border-radius with linked corners.
Generators
CSS Clamp Generator
New
Generate responsive CSS clamp() expressions.
Generators
Need another utility?
Browse related tools or explore the full Tool Base directory.