Online verloopachtergrondgenerator

Bekijk CSS-verloopeffecten in realtime, met ondersteuning voor lineaire, radiale en conische verlopen; genereer code en exporteer afbeeldingen met één klik.

Bug melden

Browseruitvoermodus: Je gegevens worden in je browser verwerkt en niet naar de server geüpload.

Snelheid en stabiliteit: De verwerkingssnelheid hangt af van je apparaat en browser. Voor grote batchtaken kan de desktopversie stabieler zijn.

Tool wordt geladen, even geduld...

Als de online tool niet kan laden of uitvoeren, probeer dan de desktoptool. https://tools.yikeaigc.com/

Toolgebruik

Terug naar oude versie

Stel eerst het verloop in en kopieer dan de code of exporteer de afbeelding. Ondersteunt lineaire, radiale, conische en herhalende verlopen en meerkleurige stops; wijzigingen worden rechts in de preview getoond.

Verloop instellen

Kies eerst het verlooptype en pas daarna richting en kleurstops aan. Houd kleurstops bij voorkeur oplopend.

VerlooptypeConisch verloop is geschikt voor kleurwielen en ringachtergronden

Richting en vormLineair verloop kan hoek of snelrichting gebruiken

Lineaire hoek90°

Herhaalperiode32%

Radiale vorm

Spreidingsbereik

Herhaalperiode32%

Centrum X50%

Centrum Y50%

Starthoek0°

Centrum X50%

Centrum Y50%

Herhalend verloop Zachtlichtlaag Vignet Fijne textuur

KleurstopsOndersteunt 2-10 stops; transparantie en positie instelbaar

VoorbeeldsjablonenGebruik als startpunt en pas verder aan

Code exporteren

Na controle van de preview kun je CSS kopiëren of PNG-, JPG-, SVG-, CSS-bestanden en assetpakket exporteren.

CodeformaatKies declaratiemethode per ontwikkelscenario

Codemodus

Klassenaam / variabelenaam

Fallback-achtergrondkleur opnemen Code comprimeren

CSS-code

AfbeeldingsgrootteAangepaste afmetingen voor afbeelding- en SVG-export

Formaatpresets

JPG-kwaliteit92%

Breedte(px)

Hoogte(px)

Bronnen downloadenBronnenpakket bevat CSS, SVG, PNG en instellingen-JSON

Live voorbeeld

Gradient Preview Wijzigingen worden direct bijgewerkt

TypeLineair

Kleurstops2

Exportformaat1920x1080

Codelengte0

Instructies

Gebruiksaanwijzing voor de software

Verlooptype instellen: kies een lineair verloop, radiaal verloop of conisch verloop. Lineair is geschikt voor banners en webachtergronden, radiaal voor effecten die vanuit het midden uitwaaieren, en conisch voor ringen, kleurwielen en decoratieve patronen.
Richting en vorm aanpassen:
- Lineair verloop: gebruik de richtingsknoppen of stel met de hoekschuifregelaar een richting van 0-360 graden in.
- Radiaal verloop: stel cirkel of ellips, spreidingsbereik en X/Y-positie van het middelpunt in.
- Conisch verloop: stel de beginhoek en de positie van het middelpunt in.
Kleurstops configureren: gebruik de kleurkiezer, het HEX-invoerveld, het positiepercentage en de transparantieparameters om elke kleurstop te beheren. U kunt kleuren toevoegen, verwijderen, sorteren, omkeren en de stops met één klik gelijkmatig verdelen.
Effectopties gebruiken: schakel herhalend verloop, zachte-lichtlaag, vignet en fijne textuur in om de achtergrond geschikter te maken voor hero-secties, kaarten, posters en ontwerpmateriaal.
Kopiëren en exporteren: kies in “Code exporteren” een CSS-klassenaam, alleen declaraties of CSS-variabelenmodus. U kunt CSS-code kopiëren en ook PNG-, JPG-, SVG- en CSS-bestanden en een ZIP-resourcepakket exporteren.
Opslaan en delen: sla in “Opslaan en delen” de huidige instellingen op, genereer een deellink of plak bestaande CSS-verloopcode om deze in de tool in te lezen en verder te bewerken.

Veelgestelde vragen

Antwoord: een lineair verloop verloopt langs een rechte lijn en is geschikt voor webachtergronden, knoppen en banners; een radiaal verloop verspreidt zich vanuit het middelpunt naar buiten en is geschikt voor spotlight- en gelaagde achtergronden; een conisch verloop draait rond het middelpunt en is geschikt voor kleurwielen, ringen en decoratieve effecten.

Antwoord: klik op “Kleur toevoegen” om kleurstops toe te voegen en stel vervolgens voor elke stop de kleur, het positiepercentage en de transparantie in. De positie van de stops beïnvloedt het bereik van de kleurovergang; u kunt ook “Gelijkmatig verdelen” gebruiken om de stops snel te ordenen.

Antwoord: Herhalende verlopen zijn geschikt voor het maken van regelmatige achtergronden zoals strepen, golven en ringvormige herhalende texturen. Voor lineaire en radiale verlopen kan de herhaalmodus worden ingeschakeld; bij conische verlopen wordt aangeraden het effect te regelen via kleurpunten en hoeken.

Antwoord: Je kunt PNG-, JPG-, SVG- en CSS-bestanden exporteren, en ook een ZIP-bronnenpakket downloaden. Het bronnenpakket bevat CSS-code, SVG-bestanden, PNG-afbeeldingen en instellingen-JSON, handig voor archivering en verdere bewerking.

Antwoord: Kopieer de gegenereerde CSS-code en plak deze in het stijlbestand van je website. De tool biedt drie modi: CSS-klassennaam, alleen declaratie en CSS-variabelen, zodat je kunt kiezen wat bij je project past.

Antwoord: Ja. Plak in het gedeelte “CSS importeren” onder “Opslaan en delen” de code voor linear-gradient, radial-gradient of conic-gradient en klik op “In tool laden” om kleuren, hoeken en posities verder aan te passen.

Antwoord: Nee. Het genereren van verlopen, kopiëren van code, tekenen van afbeeldingen en bundelen van bronnen gebeurt allemaal lokaal; je hoeft geen ontwerpinhoud naar de server te uploaden.