Getting Started with ChromaKit
Create precise gradients for modern web design
Quick Start
Your First Gradient in Three Steps
Go from sign-up to a production-ready gradient in under two minutes. No design degree required.
1. Create Your Account
Head to chromakit.app/signup and register with your email or GitHub account. The free tier includes 50 gradient saves and 10 export slots. Verification takes about 30 seconds — check your inbox and click the confirmation link sent to your address. You'll land on the dashboard immediately after.
2. Design Your First Gradient
Click the New Gradient button on the dashboard. Pick a starting color from the curated palette or type a hex code like #6C63FF. Add up to six color stops, adjust the angle with the slider (0° to 360°), and switch between linear, radial, and conic modes. The preview updates in real time as you tweak values.
3. Export & Integrate
Hit Export to generate CSS, SVG, or PNG output. Copy the CSS snippet directly into your stylesheet, or download the SVG for use in Figma and Sketch. Pro users can also export as Tailwind config objects, CSS custom properties, or SCSS maps. Your export history is saved for 90 days.
Video Tutorial
Navigate ChromaKit Like a Pro
Watch our 4-minute walkthrough of the main interface, or follow the quick guide below.
The ChromaKit dashboard is split into three zones. The left panel holds your gradient library — organized into folders like "Brand Colors," "UI Experiments," and "Client Projects." Drag and drop to reorder, or use the search bar to find gradients by name, tag, or hex code. Pin your most-used gradients to the top for instant access.
The center canvas is your workspace. Here you'll find the color stop editor, angle control, opacity sliders, and a live preview that refreshes in real time. Click the gear icon in the top-right corner to toggle grid overlays, snap-to-grid, and color-blindness simulation modes (deuteranopia, protanopia, tritanopia). Use the Space key to lock the current angle while adjusting stops.
The right sidebar contains export options, team collaboration tools, and version history. Every change is auto-saved every 15 seconds, and you can revert to any previous state within the last 30 days. Share gradients via unique URLs, invite teammates to your workspace, and leave comments on specific color stops. Press Ctrl+Z for instant undo.
Watch Full Tutorial Explore Keyboard Shortcuts