KleurFlow Editor

De standaard voor moderne CSS-gradienten

Toolbar

Kies je kleurstops

Voeg maximaal 8 kleurstops toe. Klik op een stop om de kleur, positie of transparantie aan te passen.

Stop 1 — #6366F1

Positie: 0% · Opaciteit: 100%

Stop 2 — #8B5CF6

Positie: 45% · Opaciteit: 100%

Stop 3 — #EC4899

Positie: 78% · Opaciteit: 92%

Stop 4 — #F97316

Positie: 100% · Opaciteit: 100%

Canvas

Je gradient wordt direct weergegeven. Pas hoek, stops of transparantie aan en zie het resultaat instant veranderen.

Controls

Gebruik de sliders om je gradient pixel-perfect te maken. Hoek, stop-posities en per-stop transparantie zijn allemaal onafhankelijk instelbaar.

Hoek: 135°

Linear gradient richting. Sleep de slider van 0° tot 360° of kies een preset: 0°, 45°, 90°, 135°, 180°, 270°.

Type: Linear

Schakel tussen linear, radial en conic gradients. Elke modus past de canvas-rendering en code-output automatisch aan.

Transparantie per stop

Stop 3 heeft 92% opaciteit. Per-stop alpha-waarden worden direct omgezet naar rgba() of hex-alpha notatie in de output.

Export Panel

Live code-output in CSS, SVG of WebP. Eén klik om te kopiëren, of exporteer als afbeelding voor gebruik in design tools.

CSS Output

background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 45%, rgba(236,72,153,0.92) 78%, #F97316 100%);

Kopieer CSS

SVG Output

<linearGradient id="kf-grad" x1="0%" y1="0%" x2="100%" y2="100%"> met 4 <stop> elementen, 1.2 KB gecomprimeerd.

Download SVG

WebP Afbeelding

Exporteer als 1920×1080 WebP (ca. 4.3 KB) of PNG voor maximale compatibiliteit met legacy browsers.

Download WebP