CSS Gradyanları: linear-gradient, radial-gradient ve conic-gradient

Gradyanın boyutu yoktur

Her gradyan için geçerli temel bir kural var: Gradyanların doğal (intrinsic) bir boyutu ya da tercih ettiği bir en boy oranı yoktur. Somut boyutları uygulandıkları öğenin boyutuna eşittir. Bu nedenle bir gradyanı background-size ile küçültürseniz ve tekrar kapalı değilse, aynı gradyan bir karo gibi döşenir. MDN'nin satranç tahtası örneği bu davranışı bilerek kullanır.

.kutu {
  background-color: red;
  /* geçerli */
  background-color: linear-gradient(red, blue);
  /* geçersiz: gradyan bir renk değil görseldir, bildirim yok sayılır */
  background-image: linear-gradient(red, blue);
  /* doğru kullanım */
}

linear-gradient(): yön ve açı

Doğrusal gradyanın yönü iki yolla verilir. Birincisi to ve en fazla iki kenar anahtar kelimesidir: to right, to left top gibi. Kenar sözcüklerinin sırası önemsizdir. Yön verilmezse varsayılan to bottom, yani yukarıdan aşağıyadır. İkincisi bir açıdır: 0deg to top ile aynıdır ve açı arttıkça yön saat yönünde döner. Buna göre to right = 90deg, to bottom = 180deg, to left = 270deg olur. Negatif açılar saat yönünün tersine döner; -90deg sağdan sola ilerler.

.a { background-image: linear-gradient(blue, pink); }
/* yön yok: yukarıdan aşağıya (to bottom) */

.b { background-image: linear-gradient(to right, blue, pink); }
/* soldan sağa, 90deg ile aynı */

.c { background-image: linear-gradient(to bottom right, blue, pink); }
/* köşegen: sol üstten sağ alta */

.d { background-image: linear-gradient(70deg, blue, pink); }
/* 0deg yukarıyı gösterir, 70 derece saat yönünde döner */

Köşegen yönlerde MDN'nin "sihirli köşeler" (magic corners) dediği bir ayrıntı vardır. Gradyan çizgisi kutunun merkezinden geçer; başlangıç ve bitiş noktaları, aynı çeyrekteki köşeden gradyan çizgisine çizilen dik doğruların kesişimiyle bulunur. Bunun sonucunda başlangıç ve bitişe en yakın köşeler tam olarak ilk ve son rengi alır. MDN, dört kenar yönü dışındaki to bottom right gibi köşe yönlerinin de bir açıya çevrildiğini belirtir. Pratikte bunun anlamı şudur: Bir köşeden karşı köşeye uzanan bir geçiş istiyorsanız açıyı hesaplamaya çalışmak yerine doğrudan to bottom right gibi köşe anahtar kelimesini yazmak en okunaklı yoldur.

Renk durakları ve varsayılan konumlar

Gradyanın renkleri renk duraklarıyla verilir. Her durak bir renk ve isteğe bağlı olarak bir ya da iki konumdan oluşur; konum doğrusal gradyanda <percentage> veya <length> olabilir. Konum yazmadığınız durak, öncesindeki ve sonrasındaki durağın tam ortasına yerleşir. İlk durağın konumu yoksa yüzde 0, sonuncunun yoksa yüzde 100 kabul edilir. MDN'ye göre aşağıdaki iki gradyan aynıdır.

.gokkusagi-1 {
  background-image: linear-gradient(red, orange, yellow, green, blue);
}

.gokkusagi-2 {
  background-image: linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
}
/* beş renk: 100 / 4 = 25 puanlık eşit aralıklar */

Duraklar artan sırada yazılmalıdır. Bir durağın konumu öncekinden küçükse, o durak öncekinin konumuna çekilir ve sert bir geçiş oluşur. MDN'nin örneğinde linear-gradient(red 40%, yellow 30%, blue 65%) yazıldığında sarı yüzde 30'dan yüzde 40'a çekilir; renk yüzde 40'ta kırmızıdan sarıya keskin biçimde geçer, ardından yüzde 40 ile yüzde 65 arasında, yani gradyanın yüzde 25'i boyunca sarıdan maviye yumuşak bir geçiş yapar.

Keskin çizgiler, şeritler ve çok konumlu duraklar

İki komşu durak aynı konumdaysa aradaki geçiş sıfır uzunluğa iner ve keskin bir çizgi oluşur. Bir rengin belli bir aralıkta düz kalmasını istiyorsanız durağa iki konum verirsiniz; bu, aynı rengin iki farklı konumda iki durak olarak yazılmasıyla eşdeğerdir. MDN'nin örneğine göre aşağıdaki üç gradyan birbirinin aynısıdır.

.bayrak-1 {
  background-image: linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
}
.bayrak-2 {
  background-image: linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
}
.bayrak-3 {
  background-image: linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
}

.keskin {
  background-image: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
  /* iki renk yüzde 50'de keskin çizgiyle ayrılır */
}

.dort-serit {
  background-image: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%);
  /* her rengin ikinci konumu, sonrakinin birinci konumu: geçişsiz dört şerit */
}

bayrak-2 ile bayrak-3 arasındaki tek fark yeşilin ikinci konumudur. Son durak konumsuz bırakıldığında yeşil yüzde 90'dan sonra yüzde 100'e kadar devam eder; açıkça 90% 100% yazmak da aynı sonucu verir.

Renk ipucu: geçişin orta noktasını kaydırmak

Varsayılan olarak iki durak arasındaki geçişin orta rengi, iki durağın tam ortasına düşer. Bu noktayı değiştirmek için iki durağın arasına renksiz bir konum yazarsınız; buna renk ipucu (color hint) denir. MDN'nin örneği linear-gradient(red 10%, 30%, blue 90%)'dır: Başlangıçtan yüzde 10'a kadar düz kırmızı, yüzde 90'dan sona kadar düz mavi görünür; aradaki geçişin orta rengine ise yüzde 50 yerine yüzde 30'da ulaşılır.

.ipuclu {
  background-image: linear-gradient(to top, lime, 20%, cyan);
  /* lime ile cyan arasındaki orta renge yüzde 20'de ulaşılır */
}

.ipucusuz {
  background-image: linear-gradient(to top, lime, cyan);
  /* orta renk yüzde 50'de */
}

Renk ipucu tek başına bir konumdur; yanına renk yazılmaz ve MDN'nin tanımına göre iki komşu renk durağı arasındaki geçişin nasıl ilerleyeceğini belirler. Bu yüzden ipucunu her zaman iki renk durağının arasına yazın. İpucu, yumuşak bir geçişin bir tarafa daha hızlı, diğer tarafa daha yavaş ilerlemesini istediğinizde işe yarar; örneğin bir karartma perdesinin üst kısımda hızla açılması gibi.

radial-gradient(): şekil, boyut ve merkez

Dairesel gradyan bir merkez noktasından dışa doğru eş merkezli şekiller çizer. Sözdizimi sırasıyla şekli, boyutu ve at ile merkezi alır, ardından renk durakları gelir. Şekil circle (sabit yarıçaplı daire) ya da ellipse (eksenlere hizalı elips) olabilir; yazılmazsa ellipse kabul edilir. Merkez background-position ile aynı biçimde yazılır ve varsayılanı center'dır.

Boyutu açık değerle de verebilirsiniz. circle için tek bir <length> yarıçapı belirler. ellipse için iki <length-percentage> değeri sırasıyla yatay ve dikey yarıçaptır; yüzdeler gradyan kutusunun ilgili boyutuna göredir. Şekil yazılmazsa boyuttan çıkarılır: tek uzunluk daire, iki değer elips verir. Tek bir yüzde değeri ise geçersizdir; negatif değerler de kabul edilmez.

.isik {
  background-image: radial-gradient(circle at center, red 0, blue, green 100%);
  /* merkezde kırmızı, ortada mavi, bitiş dairesinde yeşil */
}

.kosede {
  background-image: radial-gradient(circle closest-side at 25% 25%, white, transparent);
  /* merkez sol üst çeyrekte, daire en yakın kenarda biter */
}

.elips {
  background-image: radial-gradient(ellipse 50% 30% at center, gold, transparent);
  /* yatay yarıçap kutu genişliğinin yarısı, dikey yarıçap yüksekliğin yüzde 30'u */
}

.hatali {
  background-image: radial-gradient(40%, red, blue);
  /* geçersiz: tek yüzde değeri boyut olarak kabul edilmez */
}

Dairesel gradyanda renk durakları, merkezden sağa doğru uzanan sanal bir ışın üzerine yerleşir. Yüzde 0 (ya da uzunluk 0) merkezdir, yüzde 100 bitiş şeklinin bu ışını kestiği noktadır. Boyut anahtar kelimesi bu yüzden durakların gerçek konumunu da belirler: closest-side seçtiğinizde yüzde 100 en yakın kenardadır, farthest-corner seçtiğinizde en uzak köşededir ve aynı duraklar çok farklı genişlikte halkalar üretir.

conic-gradient(): merkez etrafında dönen renkler

Konik gradyanda renkler merkezden dışa değil, merkezin etrafında döner. Geçiş saat 12 yönünden başlar ve saat yönünde ilerler. from ile bir başlangıç açısı vererek gradyanı döndürebilir, at ile merkezi taşıyabilirsiniz. Durakların konumu uzunlukla değil açıyla verilir: deg, grad, rad veya turn. Bir tam dönüş 360 derece, 400 grad, 2π radyan ya da 1 turn'dür. İlk ve son durağın açısı yazılmazsa 0 ve 360 derece kabul edilir. MDN, tarayıcıların yüzde değerlerini de kabul ettiğini (yüzde 100 = 360 derece) ama bunun belirtimde yer almadığını not eder.

.donen {
  background-image: conic-gradient(red, orange, yellow, green, blue);
  /* MDN'ye göre şununla aynı:
     conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg) */
}

.dondurulmus {
  background-image: conic-gradient(from 45deg, blue, red);
}

.koseden {
  background-image: conic-gradient(from 90deg at 0 0, blue, red);
  /* merkez sol üst köşede: kutuda yalnızca bir çeyrek görünür */
}

Keskin açısal duraklarla pasta grafiğine benzeyen dilimler çizilebilir. MDN'nin örneğinde dilim sınırları 0.09turn, 0.27turn ve 0.54turn'dür; dereceye çevirirsek 0,09 x 360 = 32,4, 0,27 x 360 = 97,2 ve 0,54 x 360 = 194,4 derece eder. Ancak MDN aynı yerde, arka plan görselleri erişilebilir olmadığı için bunun pasta grafiği oluşturmanın doğru yolu olmadığını açıkça belirtir. Veri gösteren grafiklerde yardımcı teknolojilerin okuyabileceği bir yöntem seçin.

.dilimler {
  background-image: conic-gradient(
    white 0turn 0.09turn,
    #bbbbbb 0.09turn 0.27turn,
    #666666 0.27turn 0.54turn,
    black 0.54turn 1turn
  );
  border-radius: 50%;
  /* süsleme amaçlı dilimler; veri grafiği için uygun değil */
}

.satranc {
  background-image: conic-gradient(white 0.25turn, black 0.25turn 0.5turn, white 0.5turn 0.75turn, black 0.75turn);
  background-size: 25% 25%;
  /* gradyan 4 x 4 = 16 kez döşenir */
}

Satranç tahtası örneği, gradyanların doğal boyutu olmadığı için background-size ile küçültülüp döşenebildiğini gösterir. MDN'nin orijinal örneği farklı açı birimlerini karıştırır ve bunun okunması zor olduğunu kendisi de söyler; yukarıda aynı dört çeyreği tek birimle yazdık.

Tekrarlayan gradyanlar

Normal gradyan fonksiyonları durakları kendiliğinden tekrarlamaz. Tekrar için repeating-* eşleri kullanılır. Tekrarlanan bölümün uzunluğu ilk durak ile son durak arasındaki mesafedir. İlk durağın konumu yoksa 0, sonuncunun yoksa yüzde 100 kabul edildiği için, hiç konum yazmazsanız doğrusal ve konik gradyan tekrar etmez. Tekrarın başlaması için son durağı yüzde 100'den (konikte 360 dereceden) önce bitirmeniz gerekir.

.cizgili {
  background-image: repeating-linear-gradient(
    -45deg,
    red,
    red 5px,
    blue 5px,
    blue 10px
  );
  /* 10px'lik bölüm: 5px kırmızı, 5px mavi, keskin geçişle tekrarlanır */
}

.uc-kez {
  background-image: repeating-linear-gradient(45deg, blue, red 33.3%);
  /* bölüm yüzde 33,3 uzunluğunda: yaklaşık üç kez tekrar */
}

.tekrarsiz {
  background-image: repeating-linear-gradient(0deg, blue, green 40%, red);
  /* son durak varsayılan olarak yüzde 100: tekrar yok */
}

MDN'nin örnek galerisinde birden fazla tekrarlayan gradyanı katman olarak üst üste koyup ekose desen oluşturan örnekler de vardır. Çoklu arka plan katmanlarının sırası için background yazısındaki çoklu arka plan bölümüne bakabilirsiniz.

Geçişin renk uzayını seçmek

Gradyan, duraklar arasındaki renkleri hesaplarken bir renk uzayı kullanır. MDN'ye göre enterpolasyon varsayılan olarak Oklab uzayında yapılır. Bunu fonksiyonun ilk parametresine in ve bir uzay adı ekleyerek değiştirebilirsiniz. Kutupsal uzaylarda (hsl, hwb, lch, oklch) ayrıca tonun çemberde hangi yoldan ilerleyeceğini seçebilirsiniz; varsayılan shorter hue'dur.

.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-uzun {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
  /* ton çemberin uzun yolundan dolaşır: arada daha çok renk görünür */
}
.radyal {
  background-image: radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%);
}
.konik {
  background-image: conic-gradient(in hsl longer hue, red, blue, green, red);
}

Aynı iki rengin farklı uzaylarda farklı ara renkler üretmesi beklenen bir durumdur. Hangi uzayın hangi amaca uygun olduğunu, ton yollarının nasıl seçildiğini ve aynı sözdiziminin color-mix() içinde nasıl kullanıldığını color-mix() ve göreceli renkler yazısında ayrıntılı olarak anlatıyoruz. Tarayıcı desteği için MDN sayfasındaki uyumluluk tablosuna bakın; in parametresini tanımayan bir tarayıcı bütün bildirimi yok sayacağından önce parametresiz bir gradyan yazıp ardından yenisini eklemek güvenli bir yedektir.

Görselin üzerine gradyan katmanı

Gradyanlar saydamlığı desteklediği için bir fotoğrafın üzerine renk perdesi koymanın kolay yoludur. Çoklu arka planda ilk katman en üsttedir, bu yüzden gradyanı önce, görseli sonra yazarsınız. transparent kullanırken MDN'nin notunu hatırlayın: Belirtim bu anahtar kelimenin alpha ile önceden çarpılmış uzayda hesaplanmasını ister, böylece geçişin ortasında beklenmedik bir grileşme olmaz; eski tarayıcılar onu saydam siyah gibi ele alabilir.

.kapak {
  background:
    linear-gradient(to right, transparent, mistyrose),
    url("kapak.jpg");
  /* gradyan üstte, fotoğraf altta */
}

.karartma {
  background-image:
    linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 0%)),
    url("kapak.jpg");
  /* üstte yüzde 60 siyah, aşağı doğru tamamen saydam */
  color: white;
}

Sık yapılan hatalar

• Gradyanı renk özelliğine yazmak: background-color ve color gradyan kabul etmez.
• Açı yönünü ters düşünmek: 0deg aşağıdan yukarıya, 90deg soldan sağa ilerler; açı saat yönünde artar.
• Repeating gradyanda son konumu yazmamak: Son durak yüzde 100 kabul edilir ve hiçbir şey tekrarlanmaz.
• Durakları azalan sırada yazmak: Küçük konum öncekine çekilir ve istemediğiniz keskin bir çizgi oluşur.
• Dairesel gradyanda tek yüzde boyut vermek: radial-gradient(40%, ...) geçersizdir; elips için iki değer yazın.
• Veriyi gradyanla göstermek: Konik pasta grafikleri ekran okuyuculara bilgi iletmez.

Sık Sorulan Sorular

Gradyanı metin rengine nasıl uygularım?

color gradyan kabul etmez. Bunun yerine gradyanı arka plan olarak verip background-clip: text ile harflerin içine kırpabilir ve metin rengini saydam ya da yarı saydam yapabilirsiniz. Ayrıntılar background yazısında. Bu değer için uyumluluk tablosunu kontrol edin.

to right ile 90deg aynı mı?

Evet. MDN'ye göre to top, to bottom, to left ve to right sırasıyla 0deg, 180deg, 270deg ve 90deg ile eşdeğerdir. Köşe yönleri (to top right gibi) de bir açıya çevrilir, ama bu açı sabit bir sayı olarak verilmez.

Gradyanla şerit nasıl yapılır?

Komşu durakları aynı konuma koyarak keskin geçiş elde edersiniz: linear-gradient(to right, red 50%, blue 50%). Şerit desenini tekrarlatmak için repeating-linear-gradient() içinde son durağı piksel cinsinden kısa bir uzunlukta bitirin.

Gradyanlar görsel dosyası yerine kullanılabilir mi?

Basit renk geçişleri ve desenler için evet; MDN de gradyanların benzer etkiler için kullanılan raster görsellerin yerini tutabildiğini belirtir. Fotoğraf gibi karmaşık içerikler için elbette görsel dosyası gerekir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · background özellikleri · color-mix() ve renk uzayları · CSS renk değerleri · border-radius ve box-shadow · CSS animasyonları