Gradient Swatch Exporter - Online CSS to PNG Palette

A Gradient Swatch Exporter is a tool that takes your CSS gradient code (like linear-gradient(90deg, red, blue)) and converts it into downloadable PNG images. It also extracts individual color samples (swatches) from the gradient so you can build a cohesive color palette. This is incredibly useful for web designers, UI/UX designers, and developers who want to capture gradient colors for style guides, mood boards, or design systems.

Our tool supports all major CSS gradient types: linear-gradient (with custom angles like 90deg, 135deg, or directional keywords like "to right"), radial-gradient (circle and ellipse shapes with customizable center positions), and conic-gradient (for pie-chart-style circular gradients). Color stops can use hex codes (#ff0000), RGB/RGBA values, HSL/HSLA, and named colors. Percentages and position values are fully supported.

We render your gradient onto an HTML5 Canvas at high resolution, then sample pixel colors at evenly-spaced intervals along the gradient direction. For linear gradients, samples are taken along the angle line from start to end. For radial gradients, samples radiate from the center outward. You can adjust the number of samples (3 to 24) to get finer or coarser palette extractions. Each sampled color is displayed with its hex code for easy copying.

You can export in three modes: Full Gradient Image — a smooth gradient strip perfect for website backgrounds or headers; Swatch Palette Strip — a horizontal row of extracted color blocks; and Swatch Grid (4×N) — a compact grid layout ideal for style guide documentation. Export resolutions range from 512px to 4096px wide, with custom dimensions available. All exports are in PNG format with transparency support.

Absolutely! All PNG images you generate with this tool are yours to use in any project — commercial, personal, or open-source. There are no watermarks, no attribution requirements, and no restrictions. The gradients you create from your own color combinations are entirely your own work. Even the preset gradients are provided as free starting points with no strings attached.

There are several practical reasons: 1) PNG files work everywhere — email clients, presentation software, image editors, and apps that don't support CSS; 2) You can share gradient swatches with team members who don't code; 3) PNG gradients can be imported into Figma, Sketch, or Adobe Creative Suite; 4) You get a tangible color palette reference for your design system; and 5) Exported PNGs load instantly without CSS rendering overhead, making them ideal for performance-critical contexts.

Linear gradients transition colors along a straight line defined by an angle (e.g., 90deg goes left-to-right). They're the most common type, used for buttons, headers, and overlays. Radial gradients radiate colors outward from a central point in circular or elliptical patterns — great for spotlights, vignettes, and depth effects. Conic gradients (also called conical or angle gradients) sweep colors around a center point in a circular rotation, like a color wheel or pie chart slices. Each type creates distinctly different visual effects.

For the best results: Use 2-5 color stops — too many stops can look muddy; Space stops thoughtfully — abrupt transitions create banding, while smooth spacing looks polished; Choose harmonious colors — use color theory (complementary, analogous, or triadic schemes); Test different angles — a 135deg diagonal often looks more dynamic than horizontal; and Export at higher resolution (2048px+) if the image will be used in print or on retina displays. Always preview before downloading!

Yes, completely free! No sign-up required, no ads, no hidden costs. We built this tool to help the design and development community work more efficiently with gradients. You can generate unlimited PNG exports, extract unlimited color palettes, and use everything in your projects without any limitations. Bookmark this page and come back anytime you need to quickly export a gradient.

This tool works on all modern browsers: Chrome 90+, Firefox 88+, Safari 15+, and Edge 90+. Conic gradient previews require slightly newer browser versions (Chrome 99+, Safari 15.4+) due to Canvas API support. On mobile devices, the tool is fully responsive and works great on iOS Safari and Android Chrome. If your browser doesn't support a specific gradient type, we'll show a friendly fallback message.