CSS-gradient-generator

Maak linear-gradient-CSS uit kleuren en richting.

Developer

Kies kleuren en richting om een CSS linear-gradient te genereren. Voorvertoning wordt live bijgewerkt. Kopieer de CSS wanneer klaar. Draait in je browser.

0%
100% 
background: linear-gradient(to right, #3b82f6, #8b5cf6);

Over CSS-gradientgenerator

Deze tool bouwt een CSS linear-gradient uit je gekozen richting en kleuren. Je kunt meerdere kleurstops toevoegen. De voorvertoning en CSS worden bijgewerkt wanneer je opties wijzigt. Kopieer het fragment naar je stylesheet.

Hoe te gebruiken

  1. Selecteer richting (bijv. naar rechts, 45deg).
  2. Kies kleuren met de kleurenkiezer of voer hex in. Voeg meer kleuren toe indien nodig.
  3. Kopieer de gegenereerde CSS en plak het in je project.

Belangrijkste kenmerken

  • Visuele richting- en kleurselectie met realtime gradiëntvoorvertoning
  • Ondersteuning voor meerdere kleurstops — maak tweekleurige of complexe multicolor gradiënten
  • Genereert standaard CSS linear-gradient-syntaxis compatibel met alle moderne browsers
  • Kopiëren naar klembord met één klik voor snelle workflowintegratie
  • 100% browsergebaseerd — geen servercommunicatie of gegevensupload
  • Aanvulling op de CSS Box Shadow Generator voor compleet visueel CSS-ontwerp

Wanneer dit hulpmiddel te gebruiken

  • Achtergrondgradiënten maken voor hero-secties, banners en headers
  • Gradiëntknoppen en call-to-action-elementen ontwerpen
  • Overlay-effecten bouwen voor afbeeldingen en video-achtergronden
  • Experimenteren met kleurcombinaties voordat je ze vastlegt in code
  • CSS-gradiëntsyntaxis leren door visueel experimenteren

Technische details

De tool genereert een CSS linear-gradient()-waarde met de geselecteerde richting en kleurstops. Richtingen kunnen sleutelwoorden zijn (to top, to right, to bottom left) of hoeken in graden. Elke kleurstop kan optioneel een positiepercentage bevatten. De uitvoer is standaard CSS die werkt in alle moderne browsers (Chrome, Firefox, Safari, Edge) zonder vendor prefixes. Voor radiale of conische gradiënten moet je de uitvoer handmatig aanpassen. De voorvertoning rendert de gradiënt op een div-element met exact dezelfde CSS die je kopieert.

Conclusie

De CSS Gradiëntgenerator is een visuele, intuïtieve tool voor het maken van prachtige lineaire gradiënten zonder CSS met de hand te schrijven. Het produceert browsercompatibele code met één klik — perfect voor ontwerpers en ontwikkelaars die pixelperfecte gradiënten willen zonder giswerk.

Veelgestelde vragen

Kan ik meer dan twee kleuren toevoegen?
Ja. Gebruik Kleur toevoegen om stops toe te voegen. Je kunt ze herordenen of verwijderen. Elke stop kan een positie hebben (bijv. 50%).
Wordt mijn gradient naar een server gestuurd?
Nee. De CSS wordt in je browser opgebouwd.
Welke browsers ondersteunen linear-gradient?
Alle moderne browsers ondersteunen linear-gradient. De tool geeft standaard CSS uit; voeg vendor prefixes toe als je oudere ondersteuning nodig hebt.
Kan ik radiale of conische gradiënten maken?
Deze tool richt zich op lineaire gradiënten. Voor radiale of conische gradiënten kun je de gegenereerde uitvoer aanpassen door linear-gradient te vervangen door radial-gradient of conic-gradient en de parameters aan te passen.