Getting Started with ChromaFlow
Design. Customize. Export Stunning Gradients.
Create Your Studio Account
Begin your workflow by registering a free ChromaFlow workspace. You’ll receive instant access to the core gradient engine, 50 project slots, and 10GB of secure cloud synchronization.
Visit the sign-up portal and authenticate using your work email or GitHub OAuth. After entering the 6-digit verification code sent to your inbox, you’ll be prompted to name your studio (e.g., “Nova Design Lab”) and select your initial color profile preference. Pro-tier users can unlock advanced mesh blending and team collaboration boards during checkout.
Navigate the Canvas Dashboard
Once logged in, the main dashboard loads in under 1.2 seconds. Familiarize yourself with these three core modules before starting your first composition.
Precision Color Picker
Input exact HEX, RGB, or HSL values using the left-hand panel. The picker supports real-time delta-E comparison and integrates with Pantone+ and Coated FOGRA39 standards for print-ready accuracy.
Stop Manager & Opacity Slider
Add up to 16 color stops per gradient. Drag the circular handles to adjust positioning, then fine-tune transparency with the 0–100% opacity track. Enable smooth interpolation or hard-edge transitions with one click.
Export & Format Toolbar
Located at the top-right, this toolbar handles rendering and delivery. Choose from CSS, SCSS, LESS, SVG, PNG (up to 8192px), or JSON. All exports include fallback color codes and minified syntax options.
Generate Your First Gradient
Put the tools to work by creating a linear sunset blend. Click the “+ New Project” button in the dashboard grid, then select “Linear” from the orientation dropdown.
Set your starting stop to #FF7E5F and your ending stop to #FEB47B. Drag a third stop to the 55% mark and apply #FF9A8B for a luminous mid-tone shift. Rotate the gradient axis to 135 degrees, then click “Render Preview.” Once satisfied, hit “Export to Clipboard” to copy the ready-to-use CSS string, or save the composition directly to your “My Library” folder. You can now share it via a unique ChromaFlow URL or embed it into Figma and Webflow using our native plugins.