CSS-generator voor geanimeerde verloopachtergronden

Maak online dynamische verloopachtergronden, met ondersteuning voor meerdere kleuren, animatierichtingen en presets, en genereer met één klik CSS-code

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

Kies eerst kleuren, pas daarna de animatie aan en kopieer of download de code. Voorinstellingen kunnen direct als voorbeeld worden gebruikt. Je kunt ook kleuren, stops, richting, snelheid en uitvoerdoel aanpassen. Alle previews, generatie en opslag gebeuren op deze pagina.

Live voorbeeld CSS Keyframes Tekst / rand / achtergrond Instellingen opslaan

Aantal kleuren-

Animatietype-

Duur-

Uitvoerdoel-

Kleurinstellingen

Starten met een voorbeeld is sneller. Kleurstops bepalen het ritme van de overgang; houd bij voorkeur 2-6 kleuren aan.

Voorbeeldopzet Klikken overschrijft huidige kleuren

Gradientbasis Lineair past bij webachtergronden, radiaal bij spotlichteffecten, conisch bij randen of badges

Verlooptype

Gradienthoek135°

135°

Radiaal / conisch midden

Kleurstops Behoud 2 kleuren, max. 8 kleuren

Animatieparameters

Gebruik een lagere snelheid als pagina-achtergrond. Schakel minder beweging in om effecten te beperken.

Animatietype Kies andere Keyframes-logica

Bewegingsrichting Beïnvloedt keyframes van background-position

Snelheid en lus Grotere achtergrond = duidelijkere kleurverschuiving

Animatieduur10s

10s

Achtergrondgrootte400%

400%

Animatiecurve

Oneindige lus Heen en terug Pauze bij hover Compatibel met minder beweging

Genereren en exporteren

Stel klassenaam en gebruik in, kopieer de CSS naar je stijlbestand en voeg de klasse toe aan het doelelement.

Instellingen toepassen Dezelfde kleuren kunnen achtergrond-, tekst- of randeffecten maken

CSS-klassenaam

Uitvoerdoel

Min. containerhoogte (px)

Afronding (px)

Randbreedte (px)

Binnenachtergrond rand

Gegenereerde CSS-code

Voorbeeld-HTML

Live voorbeeld

Animated Gradient Pas kleuren, richting en snelheid aan; het effect wordt direct bijgewerkt. Geschikt voor hero-secties, knoppen, landingspagina's en visuele kaarten. CSS Ready

Verlooptype-

Richting-

Grootte-

Klassenaam-

Instructies

Gebruiksaanwijzing voor de software

Kleurenschema kiezen: klik in “Kleurinstellingen” op een voorbeeldschema, of voeg handmatig kleuren en stops toe, verwijder ze of pas ze aan.
Verlooptype instellen: kies een lineair, radiaal of conisch verloop en pas indien nodig de hoek en de middenpositie aan.
Animatieparameters configureren: stel in “Animatieparameters” de vloeiende beweging, bewegingsrichting, duur, achtergrondgrootte, animatiecurve en herhalingsmodus in.
Uitvoerdoel kiezen: kies in “Genereren en exporteren” voor achtergrondcontainer, verlooptekst of verlooprand, en stel parameters in zoals CSS-klassennaam, afgeronde hoeken en rand.
Effect bekijken: rechts kun je schakelen tussen voorbeeldmodi voor achtergrond, kaart, tekst en rand. Genereer de code pas nadat je het effect hebt bevestigd.
Code kopiëren of downloaden: klik op “CSS kopiëren”, “HTML kopiëren” of “CSS downloaden” om de code toe te passen op pagina-elementen.
Instellingen opslaan: klik op “Instellingen opslaan” om de huidige parameters te behouden, zodat je de volgende keer verder kunt bewerken.

Veelgestelde vragen

Antwoord: Kopieer de CSS-code naar je stylesheet en voeg vervolgens de klassennaam uit de voorbeeld-HTML toe aan het element waarop je het verloop wilt weergeven.

Antwoord: Lineaire verlopen zijn geschikt voor pagina-achtergronden en banners; radiale verlopen zijn geschikt voor spotlight- en zachte verspreidingseffecten; conische verlopen zijn geschikt voor randen, badges en visuele effecten met rotatiegevoel.

Antwoord: Je kunt de achtergrondgrootte vergroten, meer kleuren toevoegen, de kleurstops aanpassen of animatiestijlen kiezen zoals diagonale stroming of ademende stroming.

Antwoord: Ja. Kies bij het uitvoerdoel “Verlooptekst”; de tool genereert CSS-code met background-clip:text.

Antwoord: Algemene pagina-achtergronden kunnen normaal worden gebruikt. Als de pagina veel animaties bevat, is het aan te raden de animatieduur te verlengen, het aantal kleuren te verminderen en compatibiliteitscode voor verminderde beweging in te schakelen.