CSS Gradient Generator

Create beautiful CSS gradients with ease. Choose from presets or customize your own with multiple color stops.

Gradient Type

Angle: 135deg

0deg180deg360deg

Color Stops

0%
100%

2/5 color stops

CSS Code

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Live Preview

Preview shown at 16:9 aspect ratio. Download exports at 1920x1080px.

Preset Gradients

How it works

1

Choose type

Select linear, radial, or conic gradient

2

Add colors

Pick colors and set positions for each stop

3

Adjust angle

Fine-tune the gradient direction

4

Export

Copy CSS code or download as PNG

Features

Multiple Types

Create linear, radial, and conic gradients with full control.

Color Stops

Add up to 5 color stops with precise position control.

Copy CSS

One-click copy of CSS code ready for your projects.

PNG Export

Download your gradient as a high-resolution PNG image.

Perfect For

Website BackgroundsHero SectionsButton StylesCard DesignsSocial Media GraphicsApp UIBanner BackgroundsPresentation SlidesEmail HeadersOverlay Effects