CSS-Gradientengenerator: Linear, radial, konisch (und Winkelfalle)

Ich habe den größten Teil eines Nachmittags durch einen Gradienten verloren. Keine komplizierte - ein Heldenhintergrund auf einer WP-Administrations-Marketing-Seite, Markenblau verblasst in der Marke Orange, diagonal. ich schrieb linear-gradient(45deg, #4466EE, #E99537) Und es ging in die falsche Richtung. Also habe ich es versucht -45degdrohen Auch falsch. dann 135deg, was richtig war, und ich ging weiter, ohne zu verstehen, warum, was das schlechteste Ergebnis ist, weil es garantiert, dass Sie es wieder falsch machen.

Der Grund ist, dass CSS-Gradientenwinkel nicht die Winkel sind, die Sie im Mathematikunterricht gelernt haben. 0deg Punkte herauf, und der Winkel steigt im Uhrzeigersinndrohen In der Trigonometrie - und in SVG und in Canvas - 0 Punkte rechts und Winkel steigen gegen den Uhrzeigersinn. zwei verschiedene Konventionen, eine identisch aussehende deg Einheit und keine Fehlermeldung, wenn Sie die falsche auswählen. es ist klar in aufgeschrieben CSS-Bilder Module Ebene 3, und ich hatte es einfach nie gelesen.

Das ist bei einem visuellen Generator in einer Anekdote der Fall. der Gradientengenerator Auf toolz.dev gibt es eine Live-Vorschau, ziehbare Farbstopps und kopierbare CSS für lineare, radiale und konische Farbverläufe – die Winkelfrage beantwortet sich also nicht, anstatt Sie einen Nachmittag zu kosten.

tl; dr: In CSS, 0deg zeigt auf die Oberteil und Winkel laufen im Uhrzeigersinn, So to right gleich 90deg und eine obere linke → unten rechts diagonale ist 135deg, nicht 45degdrohen einsetzen Gradientengenerator um es zu sehen, anstatt es zu erraten, und die Farbpflücker Zu sticken, die in der Mitte nicht schlammig werden. Steigungen sind <image> Werte - Überall, wo Sie verwenden können url(), Sie können einen Farbverlauf verwenden. Alle clientseitig, keine Anmeldung.

Was ist ein CSS-Gradient, technisch?

Ein Farbverlauf ist keine Farbe. Es ist ein Bilddrohen Diese einzige Tatsache erklärt den größten Teil der Syntax.

per CSS-Bilder Level 3, linear-gradient(), radial-gradient(), und ihre wiederkehrenden Varianten erzeugen einen Typwert <image>drohen Das bedeutet, wo die Spezifikation akzeptiert url('photo.jpg'), es akzeptiert auch einen Farbverlauf: background-image, border-image, list-style-image, mask-image, contentdrohen Es bedeutet auch, dass Steigungen haben Keine Eigenmaße - Sie strecken sich, um die Box zu füllen, in die Sie sie eingelegt haben. Deshalb sieht der gleiche Farbverlauf auf einem 200-Pixel-Button und einem 1400-Px-Helden anders aus.

conic-gradient() kam später und lebt in CSS-Bilder Stufe 4Neben der Interpolations-Farb-Space-Syntax werde ich unten ankommen.

Was ist der Unterschied zwischen linear, radial und konisch?

Lineare Gradienten – und die Winkelkonvention

/* 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 */

Befangen Sie dies in Erinnerung und Sie werden meinen Nachmittag niemals wiederholen:

Es gibt noch eine Subtilität mit den Eck-Keywords. to bottom right tut nicht einfach gemein 135degdrohen Die Spezifikation definiert sie als einen Winkel, der so gewählt wird, dass die Gradientenlinie senkrecht zur sonst Diagonale – das heißt auf einer nicht quadratischen Box, to bottom right und 135deg sichtbar unterschiedliche Ergebnisse erzeugen. Auf einem Quadrat sind sie identisch. Das ist die Art von Dingen, die Sie um 23 Uhr bemerken, wenn eine Karte im Design richtig und in einer schmalen Spalte falsch aussieht.

Radialverläufe – wo die Größenschlüsselwörter leben

/* 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);

Die vier Größen-Keywords entscheiden wo endgültig Farbstopp-Lander, gemessen von der Mitte:

• closest-side — der nächste Rand der Box
• farthest-side - die am weitesten entfernte Kante
• closest-corner - die nächste Ecke
• farthest-corner — die am weitesten entfernte Ecke (Dies ist die Standardeinstellung)

Ändern Sie das Schlüsselwort und der Verlauf sieht wie ein anderer Farbverlauf aus. Dies ist der häufigste Grund, warum ein radialer Farbverlauf "wird nicht tun, was ich will" und es ist viel schneller, durch die vier Optionen in der Gradientengenerator als darüber zu argumentieren.

Kegelverläufe – Kuchen, Räder und Ringe

konische Sweeps Farbe um Das Zentrum beginnt bei 12 Uhr und geht im Uhrzeigersinn (die gleiche Konvention wie linear - zumindest konsistent).

/* 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%;
}

das mask Die Linie ist der ganze Trick hinter jeder Donut-Fortschrittsanzeige, die Sie jemals gesehen haben, und es sind ungefähr sechs Zeilen CSS anstelle einer SVG-Bibliothek.

Wie steuere ich, wo die Farben landen?

Farbstopps

Geben Sie einem Stopp eine Position und Sie steuern den Übergang. stoppen zwei Positionen und Sie bekommen eine harte Kante - überhaupt keine Interpolation.

/* 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%
);

Interpolationshinweise (der Mittelpunkt, von dem Sie nicht wussten, dass Sie sich bewegen können)

ein bloßer Prozentsatz zwischen Zwei Farben bewegen den 50/50 Mittelpunkt. Dies ist die am wenigsten genutzte Gradientensyntax, die ich kenne:

/* 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);

Verwenden Sie es für Bild-Scrims. ein to top, rgba(0,0,0,.8), transparent Overlay frisst normalerweise zu viel vom Foto; fallen Sie a 35% Hinweis in und die Dunkelheit bricht nach unten, wo sich die Bildunterschrift befindet.

Wiederholungsverläufe für Muster

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

Eine Zeile, keine Bilddatei, unendlich skalierbar. Wenden Sie es einfach nicht auf ein ganzseitiges Element an und fragen Sie sich dann, warum das Scrollen auf einem Android-Mittelklasse-Android - das Neulackieren eines großen sich wiederholenden Farbverlaufs während des Scrollens für den Compositor eine echte Arbeit ist.

Warum sieht mein Farbverlauf in der Mitte schlammig aus?

Zwei getrennte Ursachen, und die Leute verbinden sie ständig.

Ursache 1: sRGB-Interpolation

Standardmäßig mischt der Browser Verlaufsstopps in sRGB, Kanal für Kanal. Für zwei Farben, die nebeneinander auf dem Rad sitzen - blau bis lila, orange bis rot - das ist in Ordnung. Für Komplementärfarben erzeugt es in der Mitte ein totes Grauband, da der mathematische Mittelpunkt zweier gegenüberliegender sRGB-Farben ist Grob grau. Blau bis Gelb ist der klassische Täter.

CSS Images Level 4 behebt dies, indem Sie den Interpolationsraum benennen:

/* 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 Hält die wahrgenommene Leichtigkeit und Chroma über der Mischung konstant. Browser-Unterstützung für die in <colorspace> Die Syntax ist in aktuellen Chrome, Safari und Firefox gut, aber wenn Sie ältere Browser unterstützen müssen, ist der Fallback der alte manuelle Fix: Fügen Sie einen Zwischenstopp hinzu und steuern Sie die Mischung selbst.

Ursache 2: Verblassen zu transparent - und mein zweiter Fehler

transparent ist definiert als rgba(0, 0, 0, 0)drohen lichtdurchlässig finsterdrohen Wenn Browser naiv interpoliert werden, linear-gradient(#E99537, transparent) Würde auf dem Weg zu nichts durch immer dunkler, grauer Orange gleiten.

Moderne Browser tun das nicht – die Spezifikation erfordert die Interpolation in vormultipliziert Alpha Space, der das Problem völlig umgeht. Aber das ältere Webkit hat es nicht getan, und ich habe einen Helden auf einer Kundenseite verschickt, der auf meiner Maschine sauber aussah und auf dem zwei Jahre alten iPad wie ein schmutziger Fleck aussah. Die kugelsichere Version, die Sie nichts kostet und trotzdem überall funktioniert:

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

Ich schreibe es immer noch so aus Narbengewebe.

Worauf muss ich bei der Barrierefreiheit achten?

Kontrast muss über den gesamten Farbverlauf gehalten werden

WCAG 2.1 SC 1.4.3 Erfordert 4,5:1 für normalen Text und 3:1 für großen Text (18pt oder 14pt Fettdruck). Ein Farbverlauf bedeutet, dass Ihre Hintergrundfarbe bei jedem Pixel unterschiedlich ist, sodass die Anforderung gegen die erfüllt werden muss schlimmste Fall Punkt - Der hellste Patch, wenn Ihr Text weiß ist, der dunkelste, wenn er schwarz ist.

Das zuverlässige Muster besteht darin, den Versuch, den Verlauf selbst lesbar zu machen, nicht mehr lesbar zu machen und darüber einen Scrim zu geben:

.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;
}

Jetzt sitzt der Text auf einem bekannten dunklen Bereich, unabhängig davon, was der Farbverlauf darunter tut. Überprüfen Sie die Enden mit dem Farbpflücker Vor dem Versand - Die vollständige Kontrast-Exemplar, einschließlich der Markenfarbe, die ich bei 2,38: 1 versendet habe, befindet sich in der Farbauswahl-Anleitungdrohen

Verlaufstext ist eine Falltür

Dies ist derjenige, der mich auf einer Landing-Page für die Produktion verbrannt hat:

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

insofern background-clip: text Gilt nicht aus irgendeinem Grund - ein alter Browser, eine Erweiterung, die Hintergrundbilder blockiert, ein Druck-Stylesheet - Sie haben noch keine color: transparent und ein Unsichtbare Überschriftdrohen Der Text ist immer noch im Dom, also liest ein Bildschirmleser ihn glücklich und Sie haben keine Ahnung, dass etwas nicht stimmt. einsetzen @supports Um es zu tor:

.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;
  }
}

Einfarbig Standardmäßig als Erweiterung. So hätte es beim ersten Mal geschrieben werden sollen.

Animierte Steigungen benötigen eine Bewegungsflucht

Sie können keinen Übergangsgradienten durchführen Färbung — Der Browser interpoliert nicht zwischen zwei <image> Werte. Was die Leute stattdessen animieren, ist background-position Über einen überdimensionierten Farbverlauf:

.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; }
}

Dieser letzte Block ist nicht optional. Kontinuierliche Hintergrundbewegung ist ein dokumentierter Auslöser für vestibuläre Störungen und die Auszeichnung prefers-reduced-motion ist drei Zeilen.

(Die moderne Alternative ist die Registrierung einer benutzerdefinierten Immobilie bei @property Also ist sein Typ bekannt und daher animieren und dann innerhalb des Farbverlaufs verwenden. Es ist sauber, wird in aktuellen Browsern unterstützt und es lohnt sich immer noch, den Schutz mit reduzierter Bewegung zu haben.)

Wie baue ich eine mit dem Tool?

1. Öffne das Gradientengeneratordrohen
2. Wählen Sie einen Typ aus - linear, radial oder konisch.
3. Klicken Sie auf einen Stopp, um seine Farbe zu ändern; ziehen Sie ihn, um seine Position zu verschieben. Klicken Sie auf die Leiste, um einen Stopp hinzuzufügen; ziehen Sie ihn ab, um ihn zu entfernen.
4. Ziehen Sie für Linear den Winkel. Beobachten Sie die Nummer: Hier ist die 0deg-is-up-Konvention hört auf, abstrakt zu sein.
5. Bei Radial zyklieren Sie die vier Größenschlüsselwörter und beobachten, was sich ändert. Es ist der schnellste Weg, um Intuition für sie aufzubauen.
6. Kopieren Sie das CSS.

Zwei Farben sind normalerweise die richtige Antwort. Jeder Gradient, den ich bereut habe, hatte fünf Stopps.

Stehlen lohnt sich

/* 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);

Füttern Sie Ihre eigenen Markenfarben in die Farbpflücker Nehmen Sie zuerst die HSL-Werte und dann die Leichtigkeit und nicht den Farbton - so erhalten Sie Stopps, die sauber verschmelzen, anstatt zu kämpfen.

Häufig gestellte Fragen

Warum geht mein CSS-Gradient in die falsche Richtung?

Weil CSS-Gradientenwinkel am beginnen Oberteil und erhöhen im Uhrzeigersinn, im Gegensatz zu Trigonometrie, SVG oder Canvas, die rechts beginnen und gegen den Uhrzeigersinn gehen. to right ist 90deg, to bottom ist 180deg, und eine Diagonale von oben links nach unten rechts ist 135deg, nicht 45degdrohen

Brauche ich noch -webkit- Präfixe für CSS-Gradienten?

nicht für linear-gradient(), radial-gradient(), oder conic-gradient() — Alle drei arbeiten in jedem aktuellen Browser nicht vor. Der einzige Ort, an dem das Präfix seinen Aufenthalt noch verdient, ist -webkit-background-clip: text Für Verlaufstext, wo ältere Safari es braucht. Versenden Sie beide Erklärungen dorthin.

Kann ich einen CSS-Gradienten animieren?

Nicht der Gradientenwert selbst - ein Gradient ist ein <image>, und der Browser interpoliert nicht zwischen zwei Bildern. Die Standard-Workaround ist, den Gradienten viel größer als seine Box zu machen (background-size: 600% 600%) und belebt background-positiondrohen Der moderne Ansatz registriert eine benutzerdefinierte Eigenschaft bei @property Es hat also einen bekannten Typ und wird innerhalb des Gradienten animierbar. So oder so, bewache es mit prefers-reduced-motiondrohen

Warum sieht mein Farbverlauf in der Mitte grau oder schlammig aus?

Fast immer sRGB-Interpolation zwischen Farben, die sich gegenüberliegen, ist der Klassiker. Ihr sRGB-Mittelpunkt ist wirklich nah an grau. Beheben Sie es durch die Benennung eines besseren Interpolationsraums, linear-gradient(in oklch, to right, blue, yellow)oder durch Hinzufügen eines Zwischenstopps, um die Mischung selbst zu steuern.

Warum verblasst zu transparent schmutzig aussehen?

transparent ist definiert als rgba(0, 0, 0, 0) - transparent finsterdrohen Aktuelle Browser interpolieren im vormultiplizierten Alpha-Bereich, so dass dies kein Problem mehr ist, aber das ältere Webkit hat den Farbverlauf auf dem Weg nach draußen durchgezerrt. Wenn Sie alte Geräte unterstützen, schreiben Sie die Zero-Alpha-Version Ihrer eigenen Farbe explizit: rgba(233, 149, 55, 0) anstelle transparentdrohen

Wie mache ich eine Gradientengrenze?

Zwei Optionen. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; ist eine Zeile, tötet aber lautlos border-radiusdrohen Wenn Sie abgerundete Ecken benötigen, schichten Sie zwei Hintergründe mit unterschiedlichen background-clip und background-origin wert oder setzen Sie den Farbverlauf auf ein Pseudoelement hinter der Box.

Sind CSS-Gradienten schlecht für die Leistung?

Ein statischer Gradient ist billig - billiger als das Herunterladen eines gleichwertigen Bildes und skaliert kostenlos auf jede Größe. Kosten werden angezeigt, wenn ein großer Gefälle sein muss neu gestrichen Wiederholt: ein ganzseitiger, sich wiederholender Verlauf während des Scrollens oder mehrere überlagerte Farbverläufe unter a backdrop-filterdrohen Wenn sich eine Seite auf dem Handy klebrig anfühlt, ist das das erste, was ich in DevTools' Paint Profiler einchecken würde.

Wie viele Farbstopps sollte ein Farbverlauf haben?

Zwei, meist. Drei, wenn Sie die Mischung durch einen bestimmten Farbton steuern möchten. Darüber hinaus greifen Sie normalerweise nach etwas, das ein Netzverlauf (mehrere positionierte Radials) besser macht, und jeder zusätzliche Stopp ist eine weitere Sache, die auf dem Display eines anderen falsch aussehen kann.

Wie mache ich einen Farbverlaufshintergrund in CSS?

Stellen Sie die background (oder background-image) Eigenschaft zu einer Gradientenfunktion. background: linear-gradient(to right, #4466EE, #E99537); Malt eine Links-Rechts-Mischung ohne Bilddatei. radial-gradient() und conic-gradient() Folgen Sie dem gleichen Muster für kreisförmige und geschwungene Mischungen. Da das Ergebnis nicht heruntergeladen und nicht heruntergeladen wird, bleibt es bei jeder Größe scharf.

Wie erstelle ich Verlaufstext in CSS?

Setzen Sie den Farbverlauf auf background, dann setzen background-clip: text (mit der -webkit- Präfix für Safari) und color: transparent, so werden die Buchstaben durch den Verlauf anstelle einer Volltonfarbe gefüllt. Behalten Sie den eigentlichen Text im Markup, anstatt ihn in ein Bild zu backen, damit er von Bildschirmlesern auswählbar und lesbar bleibt.

Abschluss

Gradienten sind eine der wenigen CSS-Funktionen, die Ihnen einen echten visuellen Reichtum für null Netzwerkkosten bieten - keine Bildanforderung, keine Probleme mit dem Aspektverhältnis, Auflösungsunabhängig von der Konstruktion. Die Syntax ist klein. Die Fallen sind spezifisch und erkennbar: die Winkelkonvention, die radialen Größenschlüsselwörter, die sRGB-Schlammigkeit und die unsichtbare Überschrift Trapdoor im Verlaufstext.

Bauen Sie sie dort, wo Sie sie sehen können. der Gradientengenerator ist kostenlos, läuft vollständig in Ihrem Browser und kopiert sauberes CSS. Kombiniere es mit dem Farbpflücker Für Stopps, die ihren Kontrast halten, und die CSS-Minifizierer Wenn Sie bereit sind, es einzufügen. Der Rest des Frontendregals befindet sich im Handbuch für Entwicklerproduktivitätstoolsdrohen