CSS Gradient Generator — Linear, Radial and Conic

Design linear, radial and conic gradients visually and copy the CSS. Free, no sign-up, and your files never leave your device.

Free, with no sign-up and no watermark. The file is processed in your browser and never uploaded.

Design a CSS gradient visually: choose linear, radial or conic, set the angle or shape, and add up to eight colour stops with positions. The CSS — including a solid-colour fallback — is ready to copy.

Step by step

  1. Choose a type: Linear, Radial or Conic.
  2. Set the direction: Angle for linear and conic; circle or ellipse for radial.
  3. Edit colour stops: Change colours and positions, Add colour stop or remove one.
  4. Copy the CSS: Paste it into your stylesheet.

Handy for

Backgrounds

Hero sections and cards.

Buttons

Subtle gradient buttons.

Charts

Conic gradients for simple pie-style visuals.

Overlays

Gradients over images for readable text.

Good to know

  • Stops are sorted by position in the CSS automatically.

  • Two stops at the same position create a hard edge — useful for stripes.

Questions

Do these work in all browsers?

Linear and radial gradients work everywhere; conic gradients work in all current browsers.

Is my data sent anywhere?

No. Everything is processed by JavaScript in your browser tab — nothing you paste or open is uploaded, logged or stored on a server. You can even use the tool offline once the page has loaded.

More Developer Tools tools

  • Color Palette Generator — Generate colour palettes from harmony rules or at random, lock favourites, and export as CSS or JSON.
  • QR Code Generator — Create QR codes for links, text, Wi-Fi, contacts, email, SMS and UPI payments, as PNG or SVG.
  • QR Code Scanner — Scan QR codes with your camera or from an image file, right in the browser.
  • Barcode Generator — Generate Code 128, EAN-13, EAN-8, UPC-A, Code 39, ITF-14, Codabar and MSI barcodes, with check digits added or verified.
  • Barcode Scanner — Read EAN, UPC, Code 128, Code 39 and other barcodes from your camera or an image.
  • JSON Formatter & Validator — Beautify, minify and validate JSON with exact error positions, key sorting and a collapsible tree view.

All Developer Tools tools