Für Frontend-Entwickler
Precise gradients for modern web design
Open Gradient Studio View API ReferenceClean CSS, Zero Compromise
ChromaKit exports vendor-prefixed, minified declarations that drop directly into your stylesheet. No runtime dependencies, no bloat.
One-Click Copy-Paste
Grab fully formatted linear-gradient() and conic-gradient() strings instantly. Includes fallback hex values and exact stop percentages for pixel-perfect rendering across Chromium, Gecko, and WebKit.
Vite & Webpack Integration
Pipe gradients into your build pipeline via the chromakit-cli package. Configure vite.config.js to auto-generate design tokens during compilation, keeping your CSS variables perfectly synced.
SCSS & Tailwind Plugins
Drop the @chromakit/tailwind utility into your tailwind.config.js. Access 128 curated gradient presets directly in your utility classes, with full support for arbitrary values and dark mode variants.
Engineered for Modern Stacks
Stop wrestling with browser inconsistencies. ChromaKit handles color space interpolation so your gradients render smoothly without JavaScript polyfills.
Zero-JS Runtime
All calculations happen at build time or in the browser's native CSS engine. Your bundle size stays untouched, and Lighthouse performance scores remain pristine.
Design Token Sync
Export gradients as JSON or CSS custom properties. Sync directly with Storybook or Figma tokens using our @chromakit/tokenize utility, ensuring your dev team and designers share the exact same palette.
Automated Accessibility Checks
Run npx chromakit audit to verify contrast ratios against WCAG 2.2 AA standards. The tool flags low-contrast gradient stops and suggests adjusted opacity values before you push to production.