CSS-gradiënt

Maak CSS-gradienten visueel met een drag-and-drop editor. Ondersteunt lineaire, radiale en conische gradienten. Kopieer de CSS-code met een klik.

Belangrijkste functies

Visuele editor voor lineaire, radiale en conische verlopen
Sleep-en-loslaat-besturing voor kleurstoppen
Kopieer schone CSS-verloopcode met één klik
Voorvertoning over de volledige pagina om je werk in actie te zien

Guide

Gradiënten kunnen een ontwerp maken of breken. Een subtiel achtergrondgradiënt voegt diepte toe zonder zwaar aan te voelen. Een gedurfde, kleurrijke kan een eenvoudige hero-sectie omtoveren tot iets dat de aandacht trekt. Maar CSS-gradiëntcode vanaf nul schrijven - hoeken, kleurstops en percentages uitzoeken - is vervelend en moeilijk te visualiseren. Je eindigt met tientallen keren vernieuwen om te zien of het er goed uitziet. De gratis CSS-gradiëntgenerator van WebRecast laat je gradiënten visueel opbouwen. Kies je type - lineair, radiaal of conisch - en sleep kleurstops om het resultaat in real-time te zien veranderen. Wil je de hoek aanpassen? Schuif eraan. Wil je transparantie toevoegen aan een kleurstop? Gebruik de ingebouwde dekkingsregeling. De tool genereert schone, productieklare CSS-code die je met één klik kunt kopiëren en direct in je stylesheet kunt plakken. Het werkt in alle moderne browsers zonder meer. Als je CSS Gradient, Grabient of de gradiënttools in Figma en Canva hebt gebruikt, voel je je meteen thuis - alleen geeft deze CSS-gradiëntgenerator je de daadwerkelijke code, niet alleen een mooie preview. Een ontwerptip: subtiele gradiënten doen wonderen voor achtergronden. In plaats van een plat wit of grijs, probeer een zacht gradiënt van wit naar een heel licht blauw of lavendel. Het voegt visueel belang toe zonder te concurreren met je content. Voor knoppen creëert een licht gradiënt van een lichtere naar een donkerdere tint van dezelfde kleur een natuurlijk 3D-effect. Deze gratis online CSS-gradiënttool laat je experimenteren met al deze ideeën in seconden. Bouw het visueel, pak de code en zet het in je project. Geen download, geen registratie, gewoon prachtige gradiënten binnen handbereik.

Veelgestelde vragen

Kan ik de code direct in mijn project gebruiken?

Ja. De gegenereerde code is standaard CSS die werkt in alle moderne browsers.

Hoe voeg ik transparantie toe?

Klik op een kleurstop en gebruik de kiezer om de dekking in te stellen. Ik neem de rgba()-waarden voor je op!