What's the difference between linear, radial and conic?

Linear gradients blend colors along a straight line at a chosen angle — the most common, used for landing page backgrounds and UI cards. Radial gradients blend outward from a centre point in concentric rings — good for vignette and spotlight effects. Conic gradients sweep colors around a centre point like a colour wheel — modern and dramatic, often used for Y2K-revival aesthetics and dynamic data-vis backgrounds.

Can I export the CSS instead of a PNG?

Yes — the Copy CSS button writes a ready-to-paste 'background: linear-gradient(...)' string to your clipboard. It works in any CSS file, in styled-components or Emotion template literals, in CSS modules, and as a Tailwind arbitrary value (bg-[linear-gradient(...)]). For Tailwind v3, paste the gradient into a bg-[...] utility on any element.

How many color stops can I add?

As many as you need — there is no hard limit, though most production gradients use two to four stops. Two-stop gradients feel clean and modern, three-stop gradients let you create a tri-tone band, and four-plus stop gradients are useful for skeumorphic effects or for matching a specific brand mood. Click the plus button to add a stop, click the X to remove one.

Why does my exported PNG look different than the CSS rendering?

Browser CSS gradients use sub-pixel anti-aliasing tuned to your monitor's pixel density. The PNG export rasterises at the exact pixel dimensions you specified, so on a Retina display the CSS version looks slightly smoother than the PNG when both are viewed at 1× scale. For Retina-perfect output, export at 2× the displayed size and let the destination downscale.

Does it support transparency?

PNG export uses full alpha. You can set stops with alpha-aware colors (the colour picker doesn't surface alpha in v1, but a workaround is to compose the gradient over a transparent solid in your design tool after export). For CSS, you can manually edit the copied string to use rgba() or hsla() stops if you need transparency in the rendered gradient.

What's the largest gradient I can export?

Up to 4096 × 4096 px PNG, which is enough for 4K wallpapers, large-format print backgrounds, and any web hero. Larger sizes may exceed browser canvas memory limits depending on your device — if export fails, try a smaller dimension.

Is the gradient generator royalty-free for commercial use?

Yes. Gradients are not copyrightable, and the tool itself imposes no licensing on the output. Use the PNG and CSS freely in commercial products, marketing, branding, and printed material.

Does PikDraw track my gradient choices?

No. The whole tool runs in your browser using HTML5 Canvas. No stops, no colors, no exports are sent to any server. There is no signup, no watermark, and no telemetry on the design process.

Free Gradient Generator — Linear, Radial, Conic with CSS Export

A well-tuned gradient is the single fastest way to make a flat surface feel like a designed product. Linear gradients power landing-page heroes, radial gradients add depth to centred CTAs, and conic gradients bring modern Y2K-revival energy to dashboards and data-vis. PikDraw's Gradient Generator lets you design any of the three with full control over stops, angle and export size — and gives you both a PNG (for assets) and ready-to-paste CSS (for code) in one click.

What is the Gradient Generator — Linear, Radial, Conic + CSS?

The Gradient Generator is a focused canvas tool that builds linear, radial and conic gradients live in your browser. Add as many color stops as you need, position each one along the gradient (0–100%), set the angle, set the export dimensions, and download a high-resolution PNG or copy a ready-to-paste CSS string. Everything runs client-side — no signup, no watermark, no daily limit, no upload.

Key features

Three gradient types: linear, radial, conic
Unlimited color stops with picker + position
Angle control 0–360° for linear and conic
Export sizes from 64 × 64 to 4096 × 4096 px
Live preview scales to fit while exporting at full resolution
One-click PNG export at full export dimensions
One-click CSS copy — paste straight into CSS, Tailwind, styled-components
Renders entirely in HTML5 Canvas — no server round-trip
Renders the same gradient logic the browser uses for CSS
No signup, no watermark, no daily limit, no premium tier

How it works

When you change any control, the tool recomputes the gradient on a preview canvas (capped at 720 px wide for snappy interaction) and re-runs the same logic on the full-resolution canvas only at export time. Linear gradients are drawn with createLinearGradient(x1, y1, x2, y2) — the endpoints are calculated from the chosen angle so the gradient line crosses the full canvas diagonal at any rotation. Radial gradients use createRadialGradient() centred on the canvas with a radius of half the longest dimension. Conic gradients are not natively available in HTML5 Canvas, so the tool fans them out as 360 thin triangular sectors, interpolating each sector's colour between the surrounding stops — the result is visually indistinguishable from the browser's CSS conic-gradient at typical viewing distances. Colour stops are stored as an array of { color, position } objects. On every render, the array is sorted by position and each stop is fed into the appropriate canvas gradient method via addColorStop(position/100, color). For conic, the tool walks 360 sectors and for each sector interpolates between the two surrounding stops by linear RGB mixing. CSS export builds a 'linear-gradient(135deg, #abc 0%, #def 100%)' (or 'radial-gradient(circle, ...)' or 'conic-gradient(from 135deg, ...)') string by concatenating each stop and its position. The browser's CSS engine uses the same algorithm, so the exported CSS renders identically to the canvas preview in any modern browser. PNG export renders the gradient to an off-screen canvas at the exact dimensions you specified, calls toBlob('image/png'), and triggers a download.

Why use this tool

Most online gradient tools either gate the CSS export behind signup, watermark the PNG, only support linear, or top out at 1080 × 1080. PikDraw supports all three gradient types, exports up to 4096 × 4096, gives you ready-to-paste CSS, runs entirely in the browser, and asks for nothing in return — no signup, no watermark, no daily limit.

Common use cases

Landing page hero backgrounds (linear, 135°, brand colors)
OG image backgrounds at 1200 × 630 (linear or radial)
Card and surface backgrounds in dashboards (subtle linear)
Mobile wallpaper exports at 1080 × 1920 (radial or conic)
CTA button backgrounds (small linear gradient with vivid stops)
Y2K-revival data-vis backgrounds (conic with three saturated stops)
Mesh-gradient approximations by stacking multiple radial gradients in CSS

How to use this tool

Pick the gradient type — Linear flows in a straight line at the angle you choose — the default for hero backgrounds, cards and UI surfaces. Radial flows outward from the centre like a soft spotlight — good for vignette effects and centred call-to-actions. Conic wraps colors around a centre point like a colour wheel — great for modern data-vis backgrounds and dynamic accents.
Add and position color stops — Start with two stops (the defaults are a saturated tech-violet and a cyan accent). Click the plus button to add as many extra stops as you need. Each stop has a colour picker and a 0–100% position input — slide the percentages to push a stop closer to one edge for asymmetric blends, or evenly space three stops for a tri-tone band.
Tune the angle (linear and conic only) — The angle slider runs 0° to 360°. 90° is left-to-right, 180° is top-to-bottom, 135° (the default) is the classic diagonal that reads as 'modern landing page'. For conic, the angle controls where the colour cycle starts around the centre.
Set the export size — Width and height inputs accept any value from 64 to 4096 px. Default 1920×1080 covers most landing page heroes; switch to 1200×630 for OG images, 1080×1080 for Instagram posts, or 2560×1440 for desktop wallpapers. The preview scales to fit but exports at the full chosen size.
Export PNG or copy CSS — Download PNG renders the gradient at full export resolution. Copy CSS puts a ready-to-paste 'background: linear-gradient(...)' string on your clipboard — drop it straight into any CSS file, Tailwind arbitrary value, or styled-component template literal.

Who should use this

Designers building landing page hero backgrounds, developers writing CSS gradients without trial and error, brand owners exporting branded wallpaper sets, marketers producing OG images at exact 1200 × 630, content creators making thumbnail backgrounds, and anyone who needs both a PNG and a CSS string for the same gradient in one place.

How to get started

Leave the defaults (linear, 135°, violet-to-cyan), set width and height to 1200 × 630 for an OG image, hit Download PNG. The first export takes under two seconds. To use in code instead, hit Copy CSS and paste straight into your stylesheet.

Best practices

Use two stops for clean modern looks; add stops only when you have a specific reason (tri-tone band, asymmetric mood)
Asymmetric stop positions (0% / 30% rather than 0% / 50%) often feel more crafted than evenly-spaced
For text overlays on gradients, pick stops whose lightness span doesn't dip below 30% — anything darker hides text
Export at 2× your displayed size for Retina-perfect rendering, and let the destination downscale

Pro tips

For modern SaaS look: linear at 135°, deep-navy (#0f172a) to bright-violet (#7c3aed) at 0% and 100%.
For premium consumer look: radial, soft-peach centre to deep-coral edge (#fecaca to #c44569).
For Y2K conic look: conic, three saturated stops 120° apart (cyan, magenta, yellow).
Asymmetric gradients (e.g. stop 1 at 0%, stop 2 at 30%) feel more crafted than evenly-spaced 0%-50%-100%.

Expert insights

Asymmetric stops feel crafted

Move the second stop to 30% instead of 100% — the gradient gains a focal point and stops feeling generic.

Paste into Tailwind arbitrary value

Wrap the copied gradient in bg-[...] for direct Tailwind v3 use — no config changes needed.

Export at 2x for Retina

Render at 2400×1260 for a 1200×630 OG image — the destination downscale stays crisp on Retina.

Limitations to be aware of

Alpha (transparency) stops are not exposed in the colour picker in v1 — manually edit the copied CSS to use rgba()/hsla() for transparency
Conic gradients are rasterised via 360 sectors in canvas — visually indistinguishable from CSS conic at typical sizes, but pixel-peeping at 4K may reveal sector edges
Mesh gradients (multiple overlapping radials) are not supported in v1 — stack them in CSS after export
Maximum export size 4096 × 4096 — browser canvas memory limits prevent larger renders on most devices

Frequently asked questions

What's the difference between linear, radial and conic?: Linear gradients blend colors along a straight line at a chosen angle — the most common, used for landing page backgrounds and UI cards. Radial gradients blend outward from a centre point in concentric rings — good for vignette and spotlight effects. Conic gradients sweep colors around a centre point like a colour wheel — modern and dramatic, often used for Y2K-revival aesthetics and dynamic data-vis backgrounds.
Can I export the CSS instead of a PNG?: Yes — the Copy CSS button writes a ready-to-paste 'background: linear-gradient(...)' string to your clipboard. It works in any CSS file, in styled-components or Emotion template literals, in CSS modules, and as a Tailwind arbitrary value (bg-[linear-gradient(...)]). For Tailwind v3, paste the gradient into a bg-[...] utility on any element.
How many color stops can I add?: As many as you need — there is no hard limit, though most production gradients use two to four stops. Two-stop gradients feel clean and modern, three-stop gradients let you create a tri-tone band, and four-plus stop gradients are useful for skeumorphic effects or for matching a specific brand mood. Click the plus button to add a stop, click the X to remove one.
Why does my exported PNG look different than the CSS rendering?: Browser CSS gradients use sub-pixel anti-aliasing tuned to your monitor's pixel density. The PNG export rasterises at the exact pixel dimensions you specified, so on a Retina display the CSS version looks slightly smoother than the PNG when both are viewed at 1× scale. For Retina-perfect output, export at 2× the displayed size and let the destination downscale.
Does it support transparency?: PNG export uses full alpha. You can set stops with alpha-aware colors (the colour picker doesn't surface alpha in v1, but a workaround is to compose the gradient over a transparent solid in your design tool after export). For CSS, you can manually edit the copied string to use rgba() or hsla() stops if you need transparency in the rendered gradient.
What's the largest gradient I can export?: Up to 4096 × 4096 px PNG, which is enough for 4K wallpapers, large-format print backgrounds, and any web hero. Larger sizes may exceed browser canvas memory limits depending on your device — if export fails, try a smaller dimension.
Is the gradient generator royalty-free for commercial use?: Yes. Gradients are not copyrightable, and the tool itself imposes no licensing on the output. Use the PNG and CSS freely in commercial products, marketing, branding, and printed material.
Does PikDraw track my gradient choices?: No. The whole tool runs in your browser using HTML5 Canvas. No stops, no colors, no exports are sent to any server. There is no signup, no watermark, and no telemetry on the design process.

Browse all PikDraw image tools →