CSS Gradient Generator: lineair, radiaal, kegelvormig (en de hoekval)

Ik verloor het grootste deel van een middag aan een gradiënt een keer Niet een ingewikkelde - een held achtergrond op een WP Adminify marketing pagina, merk blauw vervagen in merk oranje, diagonaal Ik schreef linear-gradient(45deg, #4466EE, #E99537) En het ging de verkeerde kant op. Dus ik probeerde -45deg. Ook fout. daarna 135deg, wat juist was, en ik ging verder zonder te begrijpen waarom, wat de slechtst mogelijke uitkomst is, omdat het garandeert dat je het weer verkeerd zult doen.

De reden is dat CSS-gradiënthoeken niet de hoeken zijn die je in de wiskundeles hebt geleerd. 0deg punten opwaartsen de hoek neemt toe met de wijzers mee. In de goniometrie - en in SVG, en in canvas - nemen 0 punten rechts en hoeken tegen de klok in toe Twee verschillende conventies, één identiek uitziend deg eenheid, en geen foutmelding wanneer u de verkeerde kiest. het is duidelijk opgeschreven in CSS-beelden Module Niveau 3, en ik had het gewoon nooit gelezen.

Dat is het geval voor een visuele generator in één anekdote. de Gradiëntgenerator op Toolz.dev geeft u een live preview, sleepbare kleurstops en kopieerbare CSS voor lineaire, radiale en conische gradiënten - dus de hoekvraag beantwoordt zichzelf in plaats van u een middag te kosten.

tl;dr: Bij CSS, 0deg wijst naar de hoogst en hoeken lopen met de wijzers mee, dus to right gelijk aan 90deg en een linksboven → diagonaal rechtsonder is 135deg, niet 45deg. goed doen Gradiëntgenerator om het te zien in plaats van het te raden, en de kleurenkiezer Om haltes te kiezen die in het midden niet modderig worden. hellingen zijn <image> waarden - overal waar u maar kunt gebruiken url(), U kunt een verloop gebruiken. Alle client-side, geen aanmelding.

Wat is een CSS-gradiënt technisch?

Een verloop is geen kleur. het is een beeld. Dat ene feit verklaart het grootste deel van de syntaxis.

binnen CSS-afbeeldingen niveau 3, linear-gradient(), radial-gradient()en hun herhalende varianten produceren een waarde van het type <image>. dat betekent overal waar de specificaties accepteren url('photo.jpg'), het accepteert ook een gradiënt: background-image, border-image, list-style-image, mask-image, content. het betekent ook dat gradiënten hebben Geen intrinsieke afmetingen- ze strekken zich uit om het vakje waarin je ze hebt geplaatst te vullen, daarom ziet hetzelfde verloop er anders uit op een knop van 200 px en een held van 1400 px.

conic-gradient() kwam later en woont in CSS-afbeeldingen niveau 4, naast de syntaxis van interpolatie-kleurenruimte die ik hieronder zal krijgen.

Wat is het verschil tussen lineair, radiaal en kegelvormig?

Lineaire gradiënten - en de hoekconventie

/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);

/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);

/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537);   /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537);  /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537);  /* top-left → bottom-right */

Leg dit in het geheugen en je zult mijn middag nooit herhalen:

Er is nog een subtiliteit met de hoekzoekwoorden. to bottom right doen nee gewoon gemeen 135deg. De specificatie definieert het als een gekozen hoek, zodat de gradiëntlijn loodrecht op de nog diagonaal - wat betekent op een niet-vierkant vak, to bottom right en 135deg Leverbaar verschillende resultaten opleveren. Op een vierkant zijn ze identiek. Dat is het soort dingen dat je om 23.00 uur opvalt als een kaart er goed uitziet in het ontwerp en verkeerd in een smalle kolom.

Radiale gradiënten - waar de maattrefwoorden leven

/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);

/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);

De keywords van vier grootte bepalen waar de slotletter Kleurstoplanden, gemeten vanaf het centrum:

• closest-side- de dichtstbijzijnde rand van de doos
• farthest-side- de verste rand
• closest-corner- de dichtstbijzijnde hoek
• farthest-corner- de verste hoek (Dit is de standaard)

Wijzig het trefwoord en het verloop ziet eruit als een ander verloop. Dit is de meest voorkomende reden waarom een radiale gradiënt "won"t doet wat ik wil, en het is veel sneller om door de vier opties in de Gradiëntgenerator dan erover te redeneren.

Kegelsnoeren - taarten, wielen en ringen

Conische sweeps kleur in 't rond het midden, beginnend bij 12 o' kloksgewijs en met de klok mee (dezelfde conventie als lineair - tenminste it's consistent).

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
  #4466EE 0deg 144deg,
  #E99537 144deg 270deg,
  #34D399 270deg 360deg
);

/* Progress ring: conic + a mask */
.ring {
  background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
  border-radius: 50%;
}

dat mask Lijn is de hele truc achter elke donutvoortgangsindicator die je ooit hebt gezien, en het is ongeveer zes regels CSS in plaats van een SVG-bibliotheek.

Hoe bepaal ik waar de kleuren landen?

Kleur stopt

Geef een stop een positie en je regelt de overgang. stoppen twee posities en je krijgt een harde rand - helemaal geen interpolatie.

/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);

/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);

/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
  to right,
  #4466EE 0 25%,
  #E99537 25% 50%,
  #34D399 50% 75%,
  #0F172A 75% 100%
);

Interpolatie hints (het middelpunt waarvan je niet wist dat je het kon bewegen)

een kaal percentage er tussen in Twee kleuren verschuift het 50/50 middelpunt. Dit is het meest onderbenutte stukje gradiëntsyntaxis dat ik ken:

/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);

/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);

Gebruik het voor beeldschimmels. a to top, rgba(0,0,0,.8), transparent overlay eet meestal te veel van de foto; laat een vallen 35% Hint naar binnen en de duisternis stort in naar de bodem waar het bijschrift is.

Herhalende gradiënten voor patronen

.hatched {
  background: repeating-linear-gradient(
    45deg,
    #0F172A 0 10px,
    #1E293B 10px 20px
  );
}

Eén regel, geen afbeeldingsbestand, oneindig schaalbaar Gewoon don' t toepassen op een paginagroot element en dan afvragen waarom het scrollen van stutters op een mid-range Android - het opnieuw schilderen van een grote herhalende gradiënt tijdens het scrollen is echt werk voor de compositor.

Waarom ziet mijn verloop er in het midden modderig uit?

Twee afzonderlijke oorzaken, en mensen verwarren ze constant.

Oorzaak 1: sRGB-interpolatie

Standaard mengen browsers gradiëntstops in sRGB, kanaal voor kanaal Voor twee kleuren die naast elkaar op het wiel zitten - blauw tot paars, oranje tot rood - dat' prima. Voor complementaire kleuren produceert het een dode grijze band in het midden, omdat het wiskundige middelpunt van twee tegengestelde sRGB-kleuren is grof grijs. Blauw naar geel is de klassieke dader.

CSS Images Level 4 lost dit op door u de interpolatieruimte te laten noemen:

/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);

/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);

oklch Houdt waargenomen lichtheid en chroma stabiel over het mengsel. Browserondersteuning voor de in <colorspace> Syntaxis is goed in de huidige Chrome, Safari en Firefox, maar als je oudere browsers moet ondersteunen, is de fallback de oude handmatige oplossing: voeg een tussenstop toe en stuur de blend zelf.

Oorzaak 2: vervagen tot transparent- en mijn tweede fout

transparent wordt gedefinieerd als rgba(0, 0, 0, 0). transparant snood. Als browsers naïef worden geïnterpoleerd, linear-gradient(#E99537, transparent) zou door de steeds donkerdere, grijser oranje glijden op weg naar niets.

Moderne browsers don't doen dat - de spec vereist interpolatie in Voorvermengd Alpha Space, die het probleem volledig omzeilt. Maar oudere WebKit deed dat niet, en ik stuurde een held op een klantensite die er schoon uitzag op mijn machine en eruitzag als een vuile vlek op hun twee jaar oude iPad. De Bulletproof-versie, die u niets kost en nog steeds overal werkt:

/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));

Ik schrijf het nog steeds zo uit littekenweefsel.

Waar moet ik op letten met toegankelijkheid?

Contrast moet over het hele verloop blijven

WCAG 2.1 SC 1.4.3 Vereist 4.5:1 voor normale tekst en 3:1 voor grote tekst (18pt, of 14pt vetgedrukt). Een verloop betekent dat uw achtergrondkleur bij elke pixel anders is, dus aan de vereiste moet worden voldaan tegen de slechtste geval punt - de lichtste pleister als uw tekst wit is, de donkerste als het ' s zwart is.

Het betrouwbare patroon is om te stoppen met proberen het verloop zelf leesbaar te maken en een scrim bovenop te leggen:

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
    linear-gradient(135deg, #4466EE, #E99537);
  color: #fff;
}

Nu staat de tekst op een bekend donker bereik, ongeacht wat het verloop eronder doet. Controleer de uiteinden met de kleurenkiezer voordat u verzendt, bevindt de volledige contrast-walkthrough, inclusief de merkkleur die ik om 2.38:1 heb verzonden, zich in de Kleurkiezergids.

Gradiënttekst is een luik

Dit is degene die me daadwerkelijk heeft verbrand op een productiebestemmingspagina:

.gradient-heading {
  background: linear-gradient(135deg, #4466EE, #E99537);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

indien background-clip: text doets't om welke reden dan ook van toepassing - een oude browser, een extensie die achtergrondafbeeldingen blokkeert, een printstylesheet - you' blijven achter color: transparent en een onzichtbare kop. De tekst staat nog steeds in de DOM, dus een schermlezer leest het gelukkig en je hebt geen idee dat er iets mis is. goed doen @supports Om het te poorten:

.gradient-heading { color: #0F172A; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background: linear-gradient(135deg, #4466EE, #E99537);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

Effen kleur Standaard als een verbetering. Zo had het de eerste keer moeten worden geschreven.

Geanimeerde gradiënten hebben een bewegingsuitstapje nodig

je kunt geen overgangsgradiënt kleur kleuren- de browser won't interpoleren tussen twee <image> waarden. Wat mensen in plaats daarvan animeren is background-position Over een oversized gradiënt:

.animated {
  background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
  background-size: 600% 600%;
  animation: shift 12s ease infinite;
}

@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

Dat laatste blok is niet optioneel. Continue achtergrondbeweging is een gedocumenteerde trigger voor vestibulaire stoornissen en honouring prefers-reduced-motion is drie lijnen.

(Het moderne alternatief is het registreren van een aangepaste woning met @property Dus het type is bekend en dus animatable, gebruik het dan binnen het verloop. Het is schoon, het wordt ondersteund in de huidige browsers en het is nog steeds de moeite waard om de bewaker met een verminderde beweging te hebben.)

Hoe bouw ik er een met de tool?

1. Open de Gradiëntgenerator.
2. Kies een type: lineair, radiaal of kegelsnede.
3. Klik op een stop om de kleur te veranderen; sleep deze om de positie te verplaatsen. Klik op de balk om een stop toe te voegen; sleep deze weg om deze te verwijderen.
4. Sleep voor lineair de hoek. Let op het nummer: dit is waar de 0deg-is-up conventie stopt met abstract te zijn.
5. Voor radiaal, fiets de keywords met vier grootte en kijk wat er verandert. Het is de snelste manier om intuïtie voor hen op te bouwen.
6. Kopieer de CSS.

Twee kleuren is meestal het juiste antwoord. Elk verloop waar ik spijt van had, had vijf stops.

Verlopendheden die het stelen waard zijn

/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);

/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);

/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
  radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
  radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
  radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);

/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);

voer je eigen merkkleuren in de kleurenkiezer neem eerst de HSL-waarden en varieer vervolgens de lichtheid in plaats van de tint - dat' hoe je stops krijgt die netjes samenvloeien in plaats van vechten.

Veelgestelde vragen

Waarom gaat mijn CSS-gradiënt de verkeerde kant op?

Omdat CSS-gradiënthoeken beginnen bij de hoogst en verhogen met de wijzers mee, in tegenstelling tot trigonometrie, SVG of canvas, die rechts beginnen en tegen de klok in gaan. to right is 90deg, to bottom is 180deg, en een diagonaal rechtsboven naar rechtsonder is 135deg, niet 45deg.

Heb ik nog nodig? -webkit- Prefixen voor CSS-gradiënten?

plechtig voor linear-gradient(), radial-gradient(), of conic-gradient()- alle drie werken ongeprefixed in elke huidige browser De enige plaats waar het voorvoegsel nog steeds zijn geld verdient is -webkit-background-clip: text Voor verlooptekst, waar oudere Safari het nodig heeft. Verzend beide verklaringen daar.

Kan ik een CSS-gradiënt animeren?

Niet de gradiëntwaarde zelf - een gradiënt is een <image>, en de browser zal niet interpoleren tussen twee afbeeldingen. De standaardoplossing is om het verloop veel groter te maken dan de doos (background-size: 600% 600%) en animeren background-position. De moderne aanpak registreert een eigen woning met @property Het heeft dus een bekend type en wordt animatable binnen het verloop. Hoe dan ook, bewaak het met prefers-reduced-motion.

Waarom ziet mijn verloop er in het midden grijs of modderig uit?

Bijna altijd sRGB-interpolatie tussen kleuren die tegenover elkaar op het wiel zitten - blauw naar geel is de klassieker Hun sRGB-middelpunt ligt echt dicht bij grijs. Repareer het door een betere interpolatieruimte te benoemen linear-gradient(in oklch, to right, blue, yellow), of door een tussenstop toe te voegen om de blend zelf te sturen.

Waarom vervaagt naar transparent Vuil kijken?

transparent wordt gedefinieerd als rgba(0, 0, 0, 0)- transparant snood. De huidige browsers interpoleren in de premiumtiplied alpha-ruimte, dus dit is niet langer een probleem, maar oudere webkit sleepte het verloop door grijs op zijn weg naar buiten. Als u oude apparaten ondersteunt, schrijf dan expliciet de nul-alpha-versie van uw eigen kleur: rgba(233, 149, 55, 0) in plaats van transparent.

Hoe maak ik een verlooprand?

Twee opties. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; is één regel maar doodt stilletjes border-radius. Als je afgeronde hoeken nodig hebt, leg dan twee achtergronden met verschillende background-clip en background-origin waarden, of zet het verloop op een pseudo-element achter de doos.

Zijn CSS-gradiënten slecht voor de prestaties?

Een statisch verloop is goedkoop - goedkoper dan het downloaden van een gelijkwaardige afbeelding, en het schaalt naar elke grootte gratis Kosten verschijnen wanneer een groot verloop moet zijn opnieuw gelakt Herhaaldelijk: een volledige pagina die een gradiënt herhaalt tijdens het scrollen, of meerdere gelaagde gradiënten onder een backdrop-filter. Als een pagina plakkerig aanvoelt op mobiel, is dat het eerste dat ik de DevTools-verfprofiler zou controleren.

Hoeveel kleurstops moet een verloop hebben?

Twee, meestal. Drie als je de blend door een specifieke tint wilt sturen. Verder reik je meestal naar iets dat een mesh-gradiënt (meerdere gepositioneerde radialen) beter doet, en elke extra stop is nog een ding dat er verkeerd uit kan zien op het scherm van iemand anders.

Hoe maak ik een verloopachtergrond in CSS?

Stel de background (of background-image) eigenschap naar een gradiëntfunctie. background: linear-gradient(to right, #4466EE, #E99537); Schildert een blend van links naar rechts zonder dat er helemaal geen afbeeldingsbestand is. radial-gradient() en conic-gradient() Volg hetzelfde patroon voor circulaire en geveegde melanges. Omdat het resultaat wordt gegenereerd in plaats van gedownload, blijft het scherp op elke grootte.

Hoe maak ik verlooptekst in CSS?

Zet het verloop op background, stel dan in background-clip: text (met de -webkit- voorvoegsel voor safari) en color: transparent, dus de letters worden gevuld door het verloop in plaats van een effen kleur. Bewaar de echte tekst in de markup in plaats van deze in een afbeelding te bakken, zodat deze selecteerbaar en leesbaar blijft voor schermlezers.

inpakken

Gradiënten zijn een van de weinige CSS-functies die u echte visuele rijkdom geven voor nul netwerkkosten - geen beeldverzoek, geen aspect-ratio problemen, resolutie-onafhankelijk door constructie De syntaxis is klein De vallen zijn specifiek en kenbaar: de hoekconventie, de radiale grootte trefwoorden, sRGB-modderigheid, en het onzichtbare kopluik in gradiënttekst.

Bouw ze waar je ze kunt zien. de Gradiëntgenerator is gratis, draait volledig in uw browser en kopieert Clean CSS. Combineer het met de kleurenkiezer voor stops die hun contrast behouden, en de CSS-minifier Wanneer je klaar bent om het te inline. De rest van de frontend plank is in de Handleiding voor productiviteitstools voor .