Aan de Slag - KleurFlow Documentatie
The standard for modern CSS gradients
From Account to Export in Three Minutes
Follow this exact workflow to set up your KleurFlow workspace, craft your first multi-stop gradient, and generate production-ready CSS.
[Interface Screenshot: Dashboard overview showing the color picker, stop controls, and live preview pane]
1. Create Your Workspace
Navigate to signup.kleurflow.io and register with your work email. After verifying your inbox, you’ll land in the default "Project Alpha" workspace. Enable two-factor authentication in Settings > Security to lock down your gradient library.
2. Build Your First Gradient
Click the "New Gradient" button in the top toolbar. Set your direction to 135deg and add three color stops: #FF6B6B at 0%, #4ECDC4 at 50%, and #1A535C at 100%. Use the opacity slider on the middle stop to drop it to 80% for a subtle blend effect.
3. Export to CSS
Open the export panel on the right sidebar. Select "CSS Linear Gradient" as the format, check "Include Vendor Prefixes," and click Copy. Paste the generated code directly into your stylesheet or component library.
Optimize Your Workflow
Leverage these built-in features to speed up design reviews and maintain color consistency across your team.
Use Named Color Presets
Instead of typing hex codes manually, open the Palette Manager and save your brand colors as "KleurFlow Primary" and "KleurFlow Accent." Drag and drop them directly onto the gradient canvas.
Enable Real-Time Accessibility Contrast
Toggle the WCAG 2.1 overlay in the preview pane. KleurFlow will instantly flag any background-to-text contrast ratios falling below 4.5:1, ensuring your gradients meet compliance standards before handoff.
Continue Your Journey
Now that you’ve mastered the basics, explore advanced blending modes, team collaboration features, and API integration for automated design systems.
Ready to scale your gradient workflow? Connect your Figma plugin or generate a token for our REST API to push gradients directly into your CI/CD pipeline.