Multi-Format Export - CSS, SVG & PNG

Export Formats

Three Formats, One Workflow

ColorFlow generates production-ready gradient assets in CSS, SVG, and PNG — each optimized for its intended use case. Copy code directly, embed scalable vectors, or download raster files for design tools and legacy systems.

CSS Gradients

Exports standard linear-gradient(), radial-gradient(), and conic-gradient() syntax with automatic vendor prefixes for WebKit and Gecko. Includes fallback solid-color hex values for older browsers. Compatible with Tailwind CSS custom values, CSS custom properties, and preprocessor variables.

SVG Gradients

Generates standalone <linearGradient> and <radialGradient> definitions with <stop> color markers, interpolation modes, and spread methods. SVG output is fully scalable, works inline in HTML, and integrates seamlessly with React, Vue, and Svelte component libraries via JSX-compatible markup.

PNG Raster

Downloads anti-aliased PNG files at selectable resolutions — 1× (1024 px), 2× (2048 px), or 3× (3072 px) — with optional transparency channels. Ideal for Figma, Sketch, and Adobe XD imports, email client backgrounds where CSS gradients lack support, and CMS platforms that accept image uploads only.

Code Samples

Ready-to-Paste Output

Every export includes clean, minified code you can drop straight into your project. Below are real outputs from a sample gradient named "Aurora Drift" (hex #6C3CE1 → #C850C0 → #FF7EA4).

CSS Output

background: linear-gradient(135deg, #6C3CE1 0%, #C850C0 50%, #FF7EA4 100%);

background: -webkit-linear-gradient(135deg, #6C3CE1 0%, #C850C0 50%, #FF7EA4 100%);

/* Fallback */ background-color: #6C3CE1;

SVG Output

<linearGradient id="aurora-drift" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="#6C3CE1" />
  <stop offset="50%" stop-color="#C850C0" />
  <stop offset="100%" stop-color="#FF7EA4" />
</linearGradient>

PNG Output

aurora-drift-2x.png — 2048 × 2048 px, 184 KB
aurora-drift-3x.png — 3072 × 3072 px, 312 KB

Includes alpha channel. Optimized with lossless compression via MozJPEG pipeline.

Compatibility

Browser & Framework Support

ColorFlow's CSS exports target evergreen browsers with progressive degradation. SVG gradients render identically across all modern engines. PNG files are universally supported.

Modern Browsers

Full support in Chrome 118+, Firefox 120+, Safari 17+, and Edge 118+. CSS conic-gradient() and color-mix() functions are included when your gradient uses those features, with automatic polyfill notes for Safari 15–16.

Frontend Frameworks

CSS snippets work in React (styled-components, Emotion, CSS Modules), Vue (scoped styles, Vite SCSS), Svelte (svelte-preprocess), and Angular (component-level CSS). SVG output is JSX-ready and can be imported as React/Vue components via svgo-loader.

Design & CMS Tools

PNG exports import directly into Figma (as fill images), Webflow (background overlays), WordPress (Customizer backgrounds), and Shopify (theme asset uploads). SVG files are accepted by Canva, Notion embeds, and GitHub READMEs.

Get Started

Export Your First Gradient

Open the ColorFlow editor, design your gradient with the interactive color stops, and click Export to choose your format. Each download includes a metadata comment block with the gradient name, stop positions, and a unique 8-character hash for version tracking.

Open Gradient Editor Read the Export API Docs

Multi-Format Export — CSS, SVG & PNG