.gradient {
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}background: linear-gradient(to right, #667eea 0%, #764ba2 100%);Wat is CSS Gradient Generator?
CSS Gradient Generator is een gratis online tool waarmee je prachtige CSS-verlopen kunt maken met een visuele interface en live preview. Het ondersteunt lineaire, radiale en kegelvormige gradiënttypen, zodat u verbluffende kleurovergangen kunt ontwerpen voor website-achtergronden, knoppen, kaarten en andere gebruikersinterface-elementen.
De tool biedt een intuïtieve interface voor slepen en neerzetten voor het toevoegen en positioneren van kleurstops, het aanpassen van de gradiëntrichting en -hoek en het fijn afstemmen van dekking. U kunt in realtime precies zien hoe uw verloop eruit zal zien, waardoor het gemakkelijk is om met verschillende kleurencombinaties te experimenteren totdat u het perfecte resultaat bereikt.
Zodra u tevreden bent met uw verloop, kopieert u eenvoudig de gegenereerde CSS-code en plakt u deze in uw stylesheet. De tool voert schone, cross-browser-compatibele CSS uit die in alle moderne browsers werkt. Er is geen expertise op het gebied van ontwerp of codering nodig om professioneel ogende gradiënten te creëren.
Eén ding om te weten over hoe browsers gradiënten trekken: kleuren worden geïnterpoleerd in sRGB, wat niet perceptueel gelijkmatig is. Het mengen van twee sterk tegengestelde kleuren, waarbij blauw naar geel het klassieke geval is, neemt het middelpunt door een onverzadigd grijs dat geen van beide eindkleuren suggereert. De gebruikelijke oplossingen zijn om een stop in het midden toe te voegen om het pad te sturen, of om eindkleuren dichter bij elkaar op het wiel te kiezen. Het herhalen van een stop op dezelfde positie levert een harde rand op in plaats van een mix, en zo worden streep- en bandeffecten opgebouwd. Verkopervoorvoegsels zijn niet langer nodig voor standaardgradiënten in elke browser die nog updates ontvangt, dus de kortste uitvoer is ook het meest compatibel. Gradiënten moeten als achtergrond worden geschilderd, zodat ze allemaal zichtbaar zijn.
Hoe CSS Gradient Generator te gebruiken?
Kies verlooptype
Selecteer tussen lineaire, radiale of kegelvormige gradiënttypen. Elk type creëert een ander soort kleurovergangseffect.
Kleurstops toevoegen
Klik om kleurstops toe te voegen en kies kleuren voor elke stop. Sleep ze om hun positie langs het verloop aan te passen.
Richting en hoek aanpassen
Stel de gradiëntrichting of -hoek in voor lineaire gradiënten, of de middenpositie voor radiale gradiënten om te bepalen hoe kleuren vloeien.
Kopieer de CSS-code
Kopieer de gegenereerde CSS-code met één klik en plak deze rechtstreeks in uw stylesheet. De code is klaar voor gebruik in elk webproject.
Belangrijkste kenmerken
Klasse en Inline Output
Het verloop wordt zowel als CSS-regel als als kale achtergronddeclaratie voor een inline-stijl uitgezonden, elk met een eigen kopieerknop
Meerdere gradiënttypen
Creëer lineaire, radiale en kegelgradiënten met volledige controle over richting, hoek en vorm
Live visuele preview
Bekijk uw gradiëntupdate in realtime terwijl u kleuren, stops en routebeschrijvingen aanpast
CSS-kopie met één klik
Kopieer schone, cross-browser CSS-code klaar om in je stylesheets te plakken
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!