Ga naar inhoud
TextArray
100% lokaal

CSS-gradiëntgenerator

Genereer lineaire en radiale gradiëntdeclaraties in CSS met aangepaste kleuren en hoeken.

Uitvoer

CSS-gradiëntgenerator

Een CSS-gradiëntgenerator creëert binnen enkele seconden achtergrondgradiëntdeclaraties. Lineaire verlopen vloeien in één richting, perfect voor subtiele achtergronden of opvallende overlays. Radiale gradiënten komen voort uit een middelpunt, ideaal voor spotlight-effecten of vloeiende kleurovergangen. Kies uw verlooptype, stel de hoek in voor lineaire verlopen (0-360 graden) en kies twee kleuren: hexadecimale codes, RGB, RGBA of benoemde kleuren werken allemaal. De tool genereert een volledige CSS-achtergrondeigenschap die klaar is om in uw stylesheet te plakken.

Verlopen zijn een van de meest veelzijdige ontwerpelementen in moderne CSS. Ze verkleinen de bestandsgrootte in vergelijking met afbeeldingsachtergronden, schalen oneindig en animeren soepel in browsers. De live preview laat precies zien hoe uw verloop eruit ziet terwijl u kleuren en hoeken aanpast. Kopieer de uitvoer en pas deze toe op elk element: een pagina-achtergrond, een knop, een hero-sectie of een kaart-overlay.

Alles draait in uw browser, dus uw kleurkeuzes en instellingen blijven privé. Er worden nergens gegevens verzonden. De tool werkt ook offline, zodat u altijd en overal verlopen kunt genereren. Of u nu een website ontwerpt, een prototype van een app maakt of gewoon experimenteert met kleurencombinaties, deze generator versnelt uw workflow. Pas de hoek aan, wissel van kleur en bekijk direct de CSS-update.

FAQ

Wat is een CSS-gradiënt?
Een CSS-verloop is een vloeiende kleurovergang die rechtstreeks door de browser wordt weergegeven. Lineaire gradiënten gaan over een lijn; radiale gradiënten komen voort uit een middelpunt. Beide zijn lichtgewicht, schaalbaar en kunnen worden geanimeerd.
Welke hoek gebruik ik voor verschillende richtingen?
Voor lineaire hellingen: 0° is van links naar rechts, 90° is van boven naar beneden, 180° is van rechts naar links, 270° is van onder naar boven. Elke hoek tussen 0 en 360 graden werkt. Bij radiale gradiënten wordt geen hoek gebruikt.
Kan ik elk kleurformaat gebruiken?
Ja. Hex-codes (#FF0000), RGB (rgb(255, 0, 0)), RGBA met transparantie (rgba(255, 0, 0, 0.5)), HSL en benoemde kleuren (rood, blauw) werken allemaal in CSS-gradiënten.
Worden mijn kleurgegevens ergens naartoe verzonden?
Nee. Deze tool draait volledig in uw browser. Uw kleuren, hoeken en instellingen verlaten nooit uw apparaat.