Export Formats & Integration
Precise gradients for modern web design
Formats
ChromaKit compiles your custom gradient configurations into production-ready assets. Choose from five optimized output types tailored for different development workflows.
CSS
Native linear and radial gradients with vendor prefixes stripped for modern browsers. Supports custom animation delays, blend modes, and backdrop-filter fallbacks.
SCSS
Modular variables mapped to $chromakit-gradient-base. Includes nested mixin support for responsive breakpoint adjustments and theme inheritance.
Tailwind
Direct bg-gradient-to-r utility classes with HSLA color stops. Automatically generates JIT-compatible configuration objects for seamless plugin integration.
SVG
Scalable vector definitions with linearGradient and radialGradient tags. Optimized path data reduces file size by up to 60% while preserving smooth color transitions.
PNG
Lossless raster exports at 1x to 4x resolution. Ideal for legacy CMS platforms, email templates, or static background overlays without CSS parsing.
Code Snippets
Copy, paste, and deploy. Every export includes platform-specific syntax, complete with accessibility fallbacks and performance optimizations.
Our export engine validates color contrast ratios against WCAG 2.1 AA standards before generating output. CSS snippets include @supports checks for modern rendering pipelines, while Tailwind exports ship with pre-configured theme.extend.colors arrays. Developers using Vite or Webpack can drop the SCSS modules directly into their pipeline without additional loaders.
CSS
.hero-bg { background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); background-size: 200% 200%; animation: chroma-shift 8s ease infinite; }
SCSS
@mixin chroma-gradient($angle: 135deg) { background: linear-gradient($angle, map-get($chroma-palette, indigo-500) 0%, map-get($chroma-palette, purple-500) 100%); }
Tailwind
bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 bg-[length:200%_200%] animate-gradient-x
SVG
<linearGradient id="chroma-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#6366f1"/><stop offset="100%" stop-color="#ec4899"/></linearGradient>
PNG
// Exported as chroma-grad-2x.png (1920x1080, sRGB, 0% compression loss). Drop directly into /public/assets/ for static fallbacks.