# CSS Gradient Generator - Linear, Radial & Conic Gradients with PNG Export

> Free online CSS gradient generator: build linear, radial and conic gradients visually with draggable stops, an angle dial and presets. Copy CSS or export PNG.

- URL: https://qilingtools.com/en/css-gradient
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Design](https://qilingtools.com/en/tags/design), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

A good gradient lifts a background, button, card or poster, and this tool turns CSS gradients into direct manipulation. Click the stop bar to add a color stop, drag it to reposition, change its color and opacity, and press Delete to remove it. Set the direction of a linear gradient with the angle dial (hold Shift to snap to 15°), choose an ellipse or circle and move the center of a radial gradient, set the start angle of a conic gradient, or make any of them repeating. The preview sits on a checkerboard so semi-transparent stops are obvious. The presets gallery offers ocean, sunset, aurora, rainbow, color wheel and more as starting points, and a random button suggests new palettes. The CSS output includes a solid fallback color, and Tailwind users can copy a ready bg-[linear-gradient(...)] arbitrary value class. Need an image instead? Export a PNG at 1920×1080, phone wallpaper, square, Open Graph or any custom size, drawn to match the CSS exactly.

## How to use

1. Pick linear, radial or conic — or start from a preset
2. Add and drag color stops, then adjust colors, opacity and angle
3. Copy the CSS or Tailwind class, or export a PNG at the size you need

## Features

- Linear, radial and conic gradients, plus repeating variants
- Draggable color stops with opacity
- Angle dial with Shift to snap to 15°
- Center position and shape for radial and conic
- Presets gallery and random palettes
- CSS with fallback color and Tailwind arbitrary class
- PNG export at any size

## FAQ

### Which browsers support these gradients?

linear-gradient and radial-gradient work without prefixes in every modern browser, and conic-gradient needs Chrome 69+, Safari 12.1+ or Firefox 83+. The first background line in the output is a solid fallback — the average of your stops — for very old browsers.

### How do I use the gradient with Tailwind CSS?

Copy the Tailwind arbitrary value, for example bg-[linear-gradient(90deg,#f97316_0%,#8b5cf6_100%)], straight into your class attribute. Spaces are already replaced with underscores as Tailwind requires, and it works in Tailwind v3 and v4.

### Does the exported PNG match the CSS?

Yes. The PNG is redrawn on a canvas following the CSS rules: the linear gradient line length is computed from the angle, radial gradients use the default farthest-corner size and conic gradients start at your angle, so the image matches the preview at any aspect ratio. The repeating option currently affects the CSS output only.

### Can color stops be transparent?

Yes. Select a stop and lower its opacity; the output switches to an rgba() color, the checkerboard preview shows the transparency, and exported PNGs keep the alpha channel — handy for gradient overlays on photos.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: UTF-8 safe, optional URL-safe variant, convert text to Base64 and back in real time. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder with encodeURIComponent and encodeURI modes. Escapes Chinese, spaces and special characters. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free online JWT decoder: decode the header and payload of a JSON Web Token, show expiry and issued-at times, all locally without uploading the token.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free online hash calculator: SHA-1, SHA-256, SHA-384 and SHA-512 of text or any file through the browser crypto API. Files never leave your device.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create RFC 4122 UUID v4 in bulk with a cryptographic RNG. Options for uppercase, no hyphens and braces, with one-click copy.
- [Base Converter](https://qilingtools.com/en/base-convert): Free online number base converter: convert between binary, octal, decimal, hexadecimal and any base 2–36. Uses BigInt for huge integers, computed locally.