Visual Studio Code Extensie
KleurFlow voor VS Code
The standard for modern CSS gradients — installed in seconds, generating production-ready code in your editor.
Installation
Get KleurFlow in Your Editor
Available on the VS Code Marketplace and Open VSX. Works on VS Code 1.85+ across Windows, macOS, and Linux.
Open the Extensions view with Ctrl+Shift+X (or Cmd+Shift+X on macOS), search for KleurFlow by Stijn van der Velden, and click Install. The extension activates automatically — no configuration required. Current version 2.4.1 supports inline gradient generation, snippet expansion, and a live preview panel that renders your gradient in real time as you type.
You can also install directly from the command palette: run Extensions: Install Extensions, type kleurflow, and confirm. The package weighs 1.2 MB and includes zero telemetry by default.
Usage
Generate Gradients Without Leaving Your Code
Three commands. One panel. Zero context switching.
1. Open the Gradient Panel
Press Ctrl+Shift+P and type KleurFlow: Open Panel. A split-view panel appears beside your editor with a color picker, angle slider, and stop controls. Click any color stop to open the native color picker with full opacity support.
2. Design & Preview Live
Adjust stops, shift the angle, or switch between linear-gradient, radial-gradient, and conic-gradient. The preview swatch updates instantly. Use the Presets dropdown to load community favorites like Horizon Fade (45°, #667eea → #764ba2) or Ember Glow (135°, #f12711 → #f5af19).
3. Insert Into Your File
Click Insert at Cursor to drop the generated CSS directly where your cursor sits. Choose between raw output, a CSS custom property (--kf-gradient-horizon: linear-gradient(...)), or a Tailwind-compatible utility class. The extension respects your editor's indent settings and trailing comma preferences.
You can also use the inline command kfg — type it in any CSS or SCSS file and hit Tab to expand a gradient snippet at the current line. The snippet pre-fills with the last-used gradient from your session, so you can iterate fast.
Features
Everything You Need for Gradient-Driven Design
Built for developers who want precision, speed, and clean output.
Real-Time Preview
The panel renders your gradient at 1:1 scale using a canvas-backed swatch. Zoom in to inspect banding, adjust stop positions with pixel-level precision, and toggle a checkerboard background to preview transparent stops.
CSS Custom Properties
Export gradients as named custom properties that plug straight into your design system. KleurFlow generates kebab-case names automatically and checks for duplicates before inserting, so your stylesheet stays DRY.
Multi-Gradient Support
Stack up to four gradient layers in the panel. KleurFlow handles the comma-separated syntax, respects color-stop percentages, and produces valid CSS that works in all modern browsers (Chrome 110+, Firefox 118+, Safari 16.4+).
Accessibility Checker
Run the built-in contrast analyzer against any foreground color. KleurFlow calculates WCAG 2.2 AA and AAA ratios and flags combinations that fall short, so you never ship an unreadable gradient background.
Clipboard & Export
Copy the gradient as CSS, SCSS, Less, or a standalone PNG/SVG swatch. The export menu also supports generating a Tailwind config snippet with the gradient baked into your tailwind.config.js colors object.
Workspace Gradients
Save your favorite gradients to a .kleurflow.json file in your project root. Share them with your team via Git, and have every developer load the same palette with one click. Supports up to 200 saved entries per workspace.