CSS Gradient Generator

Build a linear CSS gradient between two colours with custom angle. Live preview, CSS code to copy, and a 1920×1080 PNG export.

100% in your browser — files never uploaded.
Postcrest — full AI image suite

Need more than a converter? AI background removal, upscale, edit and generate — one workspace.

Get the AI toolsSee pricing

How to use the CSS Gradient Generator

  1. 1
    Pick two colours
    Click each swatch to choose colours.
  2. 2
    Set the angle
    Drag the angle slider — 0° is bottom-to-top, 90° is left-to-right.
  3. 3
    Copy CSS or export PNG
    Click Copy for the CSS snippet, or Export to get a 1920×1080 PNG.

About CSS gradients

linear-gradient() is a CSS image value supported in every modern browser. It composes a smooth transition between two or more colour stops along a given angle.

PNG export rasterises the same gradient at 1920×1080 — useful for social posts, Slack backgrounds and presentation slides where vector CSS isn't accepted.

Frequently asked questions

Free?
Yes — no signup.
Browser-only?
Yes — no uploads.
Radial gradients?
This tool covers linear gradients. For complex multi-stop or radial gradients, use a dedicated builder.
Commercial use?
Yes — exported PNGs are yours.
Mobile?
Yes.

Need more than free tools? Get Postcrest's full AI image suite.

AI background removal, AI upscaling, AI image editor and AI photoshoot — every leading model in one workspace.

AI Image Generator
Every leading model — Flux, Nano Banana, Seedream, GPT-Image, SDXL.
AI Image Editor
Inpaint, outpaint, object removal — describe the edit, AI applies it.
AI Background Remover
Pixel-perfect cutouts in seconds — transparent PNG or any new scene.
AI Image Upscaler
Upscale to 4K, face-aware, print-ready, watermark-free.
Get started — access every AI tool
50% off your first 2 months. Cancel anytime.