Haal een prachtig verloop uit een foto — zet een afbeelding neer, kies een stemming en de dominante kleuren worden versleepbare verloopstops. Kopieer direct klaar-voor-gebruik CSS.

Sleep een afbeelding hiernaartoe

of klik om te bladeren — je kunt ook vanuit je klembord plakken

Alles draait in je browser — je afbeelding wordt nooit geüpload, geen aanmelding, volledig gratis.

Bronafbeelding
Kleuren lezen…
Bronafbeelding
Stemming
Geëxtraheerde kleuren
Dit zijn de dominante kleuren uit je afbeelding. Klik op een staal om het te kopiëren, of sleep de stops hieronder om het verloop bij te stellen.
Verloopvoorvertoning
Verlooptype
Hoek
°
Kleurstops
Sleep een greep om een stop te verplaatsen, of klik op de balk om er een toe te voegen. Selecteer een stop om de kleur te bewerken.
Geselecteerde stop
%
CSS
background: ;

Over Verloopgenerator vanuit afbeelding

De Gradiënt Generator vanuit Afbeelding verandert elke foto in een direct bruikbare CSS-gradiënt. Sleep, blader of plak een afbeelding en de tool leest deze op een canvas, extraheert de dominante kleuren en legt ze neer als gradiëntstops die je kunt slepen, herkleuren en herschikken totdat de mix de sfeer van het origineel benadert.

Een sfeerkiezer (Kleurrijk, Helder, Gedempt, Diep of Donker) verandert welke geëxtraheerde kleuren stops worden, zodat één foto meerdere heel verschillende gradiënten kan opleveren. Je bepaalt het gradiënttype (lineair, radiaal of conisch), de hoek, en de stops zelf: klik op de balk om er een toe te voegen, sleep om te verplaatsen, omkeren of roteren met één klik.

Het hele proces draait in je browser; je afbeelding wordt nooit naar een server geüpload. Als de preview er goed uitziet, kopieer je de complete CSS-regel, alleen de achtergrondwaarde, of de geëxtraheerde kleuren op zich, ideaal voor hero-secties, paginaachtergronden en merkvisuals afgeleid van fotografie.

Hoe gebruik je Verloopgenerator vanuit afbeelding

  1. Sleep een afbeelding, klik om te bladeren, of plak er een vanaf je klembord.
  2. Kies een sfeer (Kleurrijk, Helder, Gedempt, Diep of Donker) om te bepalen welke geëxtraheerde kleuren stops worden.
  3. Selecteer het gradiënttype (lineair, radiaal of conisch) en pas de hoek aan.
  4. Sleep de kleurstops om de mix fijn af te stemmen; voeg stops toe, verwijder ze, keer ze om of herschik ze naar wens.
  5. Klik op "CSS kopiëren" om de kant-en-klare gradiëntcode te pakken.

Veelgestelde vragen

Nee. De afbeelding wordt rechtstreeks in een canvas in je browser gelezen, en de kleurextractie en gradiëntwiskunde gebeuren allemaal lokaal. Er verlaat op geen enkel moment iets je apparaat.

Ja, volledig. Omdat alles client-side draait, zijn er geen credits, accounts of limieten: extraheer gradiënten uit zoveel afbeeldingen als je wilt.

Deze tool begint bij een foto: hij extraheert de dominante kleuren van de afbeelding en bouwt daar de gradiënt uit op. De gewone Gradiënt Generator begint vanaf nul met kleuren die je zelf kiest. Beide produceren hetzelfde soort bewerkbare, kopieerklare CSS.

De sferen herschikken de kleuren die uit je afbeelding worden geëxtraheerd: Kleurrijk bevoordeelt levendige gevarieerde tinten, Helder kiest lichte verzadigde kleuren, Gedempt selecteert zachtere ontzadigde kleuren, en Diep en Donker halen rijkere, donkerdere kleuren naar voren. Het wisselen van sfeer bouwt de gradiëntstops direct opnieuw op.

Ja. Elke stop is versleepbaar, je kunt op de balk klikken om stops toe te voegen of geselecteerde te verwijderen, de kleur van elke stop wijzigen, wisselen tussen lineair, radiaal en conisch, de hoek in stappen van 45° draaien, de richting omkeren, of nieuwe kleuren uit de afbeelding herschikken.


Populaire zoekopdrachten
verloop uit afbeelding verloop uit foto halen afbeelding naar css verloop foto verloop generator verloop uit plaatje maken css verloop uit afbeelding
Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.
Een probleem melden

Voeg deze gratis tool toe aan je eigen website — kopieer en plak de onderstaande code.