What is the CSS syntax for a gradient?

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); — the angle sets direction, followed by comma-separated color stops with optional positions. Radial gradients use radial-gradient(circle, …).

Do CSS gradients affect performance?

Gradients are rendered by the GPU and are far lighter than image files — they add zero network weight and scale perfectly at any resolution.

CSS Gradient Generator

Create beautiful CSS gradients visually: pick two or more color stops, drag their positions, set the angle for linear gradients or switch to radial, and watch the live preview. The generator outputs clean, modern CSS ready to paste into your stylesheet, plus a set of curated preset gradients for instant inspiration.

Design Tools

LinearRadial

Angle135°

Color stops

Stop 1 color

Position (%)

Stop 2 color

Position (%)

CSS

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How to use

4 clear steps.

Choose linear or radial gradient type.
Pick colors and drag the stop positions.
Adjust the angle (for linear gradients).
Copy the generated CSS into your stylesheet.

Good to know

Frequently asked questions

What is the CSS syntax for a gradient?: background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); — the angle sets direction, followed by comma-separated color stops with optional positions. Radial gradients use radial-gradient(circle, …).
Do CSS gradients affect performance?: Gradients are rendered by the GPU and are far lighter than image files — they add zero network weight and scale perfectly at any resolution.