Gradientgenerator från bild
Extrahera en vacker gradient från vilket foto som helst — släpp en bild, välj ett stämningsläge och de dominerande färgerna blir dragbara gradientstoppunkter. Kopiera klar CSS direkt.
Dra och släpp en bild här
eller klicka för att bläddra — du kan också klistra in från urklipp
Allt körs i din webbläsare — din bild laddas aldrig upp, ingen registrering, helt gratis.
background: —;
Om Gradientgenerator från bild
Gradientgeneratorn från bild omvandlar valfritt foto till en färdig CSS-gradient. Släpp, bläddra eller klistra in en bild så läser verktyget den på en canvas, extraherar dess dominerande färger och lägger ut dem som gradientstopp som du kan dra, färglägga om och ordna om tills övergången matchar känslan i originalet.
En stämningsväljare — Färgstark, Ljus, Dämpad, Djup eller Mörk — ändrar vilka extraherade färger som blir stopp, så att ett enda foto kan ge flera väldigt olika gradienter. Du styr gradienttypen (linjär, radiell eller konisk), vinkeln och själva stoppen: klicka på balken för att lägga till ett, dra för att flytta, vänd eller rotera med ett klick.
Hela processen körs i din webbläsare; din bild laddas aldrig upp till en server. När förhandsvisningen ser rätt ut, kopiera hela CSS-regeln, bara bakgrundsvärdet, eller de extraherade färgerna för sig — perfekt för hero-sektioner, sidbakgrunder och varumärkesvisuellt material som härstammar från foton.
Så använder du Gradientgenerator från bild
- Dra och släpp en bild, klicka för att bläddra, eller klistra in en från urklipp.
- Välj en stämning — Färgstark, Ljus, Dämpad, Djup eller Mörk — för att bestämma vilka extraherade färger som blir stopp.
- Välj gradienttyp (linjär, radiell eller konisk) och justera vinkeln.
- Dra i färgstoppen för att finjustera blandningen; lägg till, ta bort, vänd eller blanda om stoppen efter behov.
- Klicka på "Kopiera CSS" för att hämta den färdiga gradientkoden.