Quickstart Guide: In 5 Minuten zum perfekten Gradient
Präzise Farbverläufe für modernes Webdesign
QUICKSTART CHECKLIST
Master the Canvas in 300 Seconds
Skip the guesswork. Follow this exact sequence to generate production-ready linear and radial gradients for your next frontend project.
01. Library Selection
Open the palette drawer and filter by "Vibrant" or "Muted". Click any swatch to auto-populate the base canvas. Use Ctrl+K to jump directly to the "Aurora" or "Midnight" collections.
02. Stop Manipulation
Drag existing stops left or right to adjust percentage. Shift+Drag to lock alignment to 5% or 10% increments. Double-click a stop to input exact HEX or HSL values like #6366f1 or hsla(280, 65%, 60%, 0.8).
03. Export & Integrate
Hit Ctrl+Shift+E to open the export modal. Copy the CSS background-image property, SVG markup, or generate a Tailwind config snippet. Paste directly into your global stylesheet.
EFFICIENCY TIPS
Advanced Controls for Power Users
ChromaKit is built for velocity. Leverage these interface shortcuts to maintain creative flow without breaking your keyboard rhythm.
Keyboard Navigation
Press Tab to cycle through gradient stops. Use Arrow Up/Down to shift angle by 1 degree, or Shift+Arrows for 15-degree jumps. Press Delete on a selected stop to remove it instantly without mouse interaction.
Drag-and-Drop Precision
Click and hold a color stop to reveal the opacity slider. Drag vertically to adjust alpha channels from 0.0 to 1.0. Snap stops to exact pixel coordinates by holding Alt while dragging along the gradient bar.
Library Quick-Load
Type / in the search bar to access community uploads. Filter by Glassmorphism or Neumorphism tags. Drag a thumbnail directly onto the canvas to replace the current palette while preserving your angle settings.