Export Mogelijkheden — CSS, SVG, PNG, JPG
De standaard voor moderne CSS-gradienten
Vier formats, één perfecte gradient
KleurFlow exporteert je gradients in vier veelgebruikte formats. Of je nu code levert, een presentatie voorbereidt of een asset deelt — er is altijd een formaat dat exact past bij je workflow.
CSS
Kopieer direct een `background: linear-gradient(...)` regel met exacte HSL/HEX waarden, hoekgraden en stops. Compatibel met alle moderne browsers, inclusief Safari 15.4+. Gebruik het voor production-ready code die je paste in je stylesheet of Design System.
SVG
Download een schaalbaar `
PNG
Exporteer een lossless rasterafbeelding in 1920×1080, 2560×1440 of aangepaste resoluties. Transparante achtergrondoptioneel. Perfect voor presentaties, social-media visuals en mockups waar je geen code kan injecteren.
JPG
Comprimeer je gradient tot een compact JPG-bestand met instelbare kwaliteit (60–100 %). Handig voor e-mailsignatures, blogheaders en elke context waar bestandsgrootte prioriteit heeft over pixel-perfect precisie.
Welk format kies je wanneer?
De keuze hangt af van je doelgroep, je platform en je kwaliteitsvereisten. Hieronder vind je een overzicht van veelvoorkomende scenario's en het aanbevolen exportformaat.
Webontwikkeling
Gebruik CSS voor live websites en SVG voor illustraties die schalen. Beide formats zijn lichtgewicht, resolution-independent en werken naadloos met CSS Variables. Ontwikkelaar Lars de Vries van Studio Noord gebruikt CSS-exports dagelijks in zijn Next.js projecten.
Presentaties & Print
Kies PNG voor de hoogste beeldkwaliteit in PowerPoint, Keynote of Canva. De lossless compressie behoudt subtiele kleurovergangen die JPG zou comprimeren. Designer Maya Jansen exporteert al haar keynote achtergronden als PNG2560px.
Social Media & E-mail
Gebruik JPG met 85 % kwaliteit voor Instagram carousels, LinkedIn banners en e-mailtemplates. Het formaat levert een optimale balans tussen visuele impact en laadsnelheid — gemiddeld onder de 120 KB per gradient.
Design Systems & Branding
Combineer CSS tokens met SVG assets voor een consistent design system. Exporteer je gradient-palet als CSS custom properties (`--gradient-hero`, `--gradient-accent`) en deel de SVG's via je Figma library. Dit is de aanpak van het team achter BrandKit Amsterdam.
Proef de exportkwaliteit
De afbeelding hieronder is een PNG-export van een 5-stop linear gradient, gegenereerd in KleurFlow en gedownload als 1920×1080 bestand. Zoom in om de zuiverheid van de kleurovergangen te bekijken — geen banding, geen artefacten.
Download een set van tien voorbeeld-gradients in alle vier de formats en test ze in je eigen projecten. De ZIP-inhoud bevat een README met de exacte HSL-waarden, exportinstellingen en browsercompatibiliteitstabel.