ChromaKit for Visual Studio Code
Precise gradients for modern web design
Snippet suggestions, inline editor preview, and direct CSS/SCSS copy functionality.
Install from Marketplace View DocumentationEditor-native gradient workflow
ChromaKit renders directly inside your VS Code workspace, keeping your hands on the keyboard and your eyes on the code.
Intelligent Snippet Suggestions
Trigger `ck-linear` or `ck-conic` to auto-complete syntax. The extension suggests 42 production-ready mixins, automatically injecting HSLA color stops and vendor prefixes based on your target browsers.
Inline Editor Preview
A 160×40px canvas floats directly above your active stylesheet. Adjust angle degrees or opacity values in real-time. The preview updates instantly without requiring a file save or browser refresh.
Direct CSS/SCSS Copy
Right-click the preview canvas to copy minified rules, verbose developer comments, or SCSS `@mixin` declarations. Supports automatic variable mapping to your existing `_variables.scss` file.
Installation & Configuration
From marketplace download to your first custom mesh gradient in under 90 seconds.
Step 1: Install & Authenticate
Search `chromakit-vscode` in the Extensions view. Click Install, then sign in with your ChromaKit account to sync your 1,200+ saved palette presets and team color tokens.
Step 2: Configure Editor Settings
Open `settings.json` and set `"chromakit.previewPosition": "inline"`. Enable `"chromakit.autoFormat": true` to keep gradient stops aligned with your team's Prettier and ESLint rules.
Step 3: Generate & Deploy
Open any `.css` or `.scss` file. Press `Ctrl+Shift+P`, run `ChromaKit: New Gradient`, and click the clipboard icon on the inline preview to paste ready-to-ship code directly into your component styles.