tigtools

CSS-gradientgenerator

Kies kleuren en posities, selecteer een verlooptype en kopieer kant-en-klare CSS.

Werkt in je browser Geen registratie nodig

Type
135°
Kleurstops
  1. Stop 1
    #0b5d1e
    0%
    100%
  2. Stop 2
    #f2c14e
    100%
    100%
Een verloop heeft hier 2 tot 6 kleurstops.

Zo gebruik je deze tool

  1. Kies lineair, radiaal of conisch en stel daarna de hoek of middenpositie in.
  2. Stel voor elke kleurstop de kleur, dekking en positie in. Voeg maximaal zes kleurstops toe of verwijder de stops die u niet nodig hebt.
  3. Controleer het voorbeeld en kopieer de CSS-regel naar uw stylesheet.

Hoe het werkt

De uitvoer is een standaard CSS-declaratie voor de achtergrond. Lineaire verlopen lopen langs een hoek: 0deg loopt van beneden naar boven, 90deg van links naar rechts en 180deg van boven naar beneden. Radiale verlopen spreiden zich vanuit een middelpunt uit als een cirkel of een ellips die in het kader past. Conische verlopen draaien rond een middelpunt, vanaf de gekozen hoek. Dat is handig voor taartpuntachtige effecten en kleurenwielen.

Kleurstops worden op volgorde van hun positie weergegeven, zodat u ze vrij kunt verslepen. Een kleurstop met verminderde dekking wordt geschreven als rgba(), zodat de achtergrond erdoorheen zichtbaar is. Twee kleurstops op dezelfde positie vormen een scherpe rand in plaats van een overgang; zo maakt u strepen.

Alle drie de verloopfuncties werken in alle huidige browsers. Verlopen mengen standaard in de sRGB-kleurruimte. Tussen complementaire kleuren (zoals blauw en geel) kan dat er wat grijzig uitzien; met een extra kleurstop in het midden met een fellere kleur voorkomt u dat.

Voorbeelden

Subtiele achtergrond voor een koptekst

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) geeft een zachte overgang van boven naar beneden, waarbij donkere tekst goed leesbaar blijft.

Strepen met scherpe randen

Gebruik vier kleurstops: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. De twee stops op 50% sluiten zonder overgang op elkaar aan en vormen zo twee effen helften.

Spotlighteffect

Een radiaal verloop (circle at top left) van rgba(255, 255, 255, 0.6) naar rgba(255, 255, 255, 0), over een kleurlaag heen, geeft een zachte lichtvlek in de hoek.

Veelgestelde vragen

In welke richting loopt 0deg?

In CSS wijst 0deg omhoog, dus het verloop begint onderaan en eindigt bovenaan. 90deg loopt van links naar rechts. Dit verschilt van sommige ontwerpprogramma's, waar 0° vaak van links naar rechts loopt.

Kan ik het verloop op tekst gebruiken?

Ja: pas de achtergrond toe en voeg daarna background-clip: text en color: transparent toe. Controleer of de tekst op elk punt van het verloop goed leesbaar blijft tegen de paginaachtergrond.

Heb ik browserprefixen nodig, zoals -webkit-linear-gradient?

Nee. Huidige browsers ondersteunen de prefixvrije syntax. Prefixen zijn alleen nodig voor browsers die al vele jaren oud zijn.

Privacy

Alles wordt in uw browser gegenereerd. Uw kleuren en instellingen worden niet verzonden of opgeslagen.