Çalıştırılabilir CSS Dokümanları: Gradyan

Q: CSS'te radial gradient nasıl yapılır?

background-image: radial-gradient(#93c5fd, #1e3a8a); kullan. Renklerin önüne bir şekil ve konum ekle, örneğin radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: radial-gradient'te circle ile ellipse arasındaki fark nedir?

ellipse (varsayılan) kutunun oranlarına göre esner, bu yüzden geniş bir kutuda geniştir. circle ise kutunun şekli ne olursa olsun gradyanı yuvarlak tutar.

Q: Linear gradient'in yönü nasıl ayarlanır?

Önce bir yön ya da açı yaz: linear-gradient(to right, red, blue) ya da linear-gradient(45deg, red, blue). Varsayılan to bottom'dır (180deg); 0deg yukarıyı gösterir ve açılar saat yönünde döner.

Q: Yumuşak bir geçiş yerine keskin çizgiler nasıl yapılır?

İki renge aynı durak konumunu ver: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) rengi ortada hiç geçiş olmadan değiştirir. repeating-linear-gradient bu tür durakların oluşturduğu bir deseni tekrarlar.

Q: Gradyan background-color olarak kullanılabilir mi?

Hayır. Gradyan bir resimdir, bu yüzden background-image'a ya da background kısa yazımına yazılır. background-color: linear-gradient(...) geçersizdir ve yok sayılır.

Radial gradyanlar

radial-gradient() renkleri bir merkez noktasından dışarı doğru karıştırır. Her CSS gradyanı gibi bir resimdir, bu yüzden background-image'a (ya da background kısa yazımına) yazılır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

Tam söz dizimi radial-gradient(shape size at position, color stops) şeklindedir. Renklerden önceki her şey isteğe bağlıdır.

Parça	Değerler	Varsayılan
Şekil	`circle`, `ellipse`	`ellipse`
Boyut	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner` ya da uzunluklar	`farthest-corner`
Konum	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Renk durakları	Her biri isteğe bağlı bir konuma sahip iki ya da daha fazla renk

Boyut anahtar kelimesi son renge nerede ulaşılacağını belirler: kutunun en yakın kenarında, en uzak köşesinde ve bu şekilde. Buradaki değerleri değiştir ve gradyanın yeniden çizilmesini izle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a ve circle 40px, #f59e0b 99%, transparent (keskin kenarlı bir nokta) dene.

Linear gradyanlar

linear-gradient() renkleri düz bir çizgi boyunca karıştırır. Önce bir yön ya da açı, sonra renkleri yaz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Açılar yukarıyı gösteren 0deg'den başlar ve saat yönünde döner, yani 90deg, to right demektir ve 180deg varsayılan to bottom'dır. to right sağdan sola sayfalarda fiziksel kalır; gradyanın okuma yönünü takip etmesi gerekiyorsa onu kendin aynala.

Renk durakları ve keskin duraklar

Her rengin bir konumu olabilir. Konum verilmezse renkler eşit aralıklarla yerleşir. İki renk aynı konumu paylaştığında değişim anlıktır; çizgileri, bayrakları ve ilerleme çubuklarını böyle çizersin:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Bir durak iki konum da alabilir: #111827 12px 24px, 12px'ten 24px'e düz bir şerit çizer.

Conic gradyanlar

conic-gradient() renkleri bir saatin kolları gibi bir merkez noktasının çevresinde döndürür. Keskin duraklarla hiçbir resim ya da JavaScript olmadan bir pasta grafik çizer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

CSS ile çizilmiş bir grafik ekran okuyuculara görünmez, bu yüzden sayıları metin olarak da yaz.

Gradyanlı metin

Bir gradyan arka planı harflere kırp ve metnin kendisini saydam yap:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Düz bir color yedeğini aklında tut: kırpma başarısız olursa metin kaybolur. Gradyanlı metnin kontrastı da düzensizdir, bu yüzden onu yalnızca büyük başlıklar için kullan.

Gradyanlar resimlerle ve başka gradyanlarla tek bir background-image listesinde üst üste konabilir; katmanları, boyutu ve konumu arka plan resmi sayfası anlatıyor.

Sık yapılan hatalar

background-color: linear-gradient(...). Gradyan bir resimdir: background-image ya da background kullan.
Yanlış yönde dereceler. 0deg sağı değil yukarıyı gösterir. 90deg sağa doğru gider.
Yüksekliği olmayan bir elementte gradyan. Hiçbir şey görünmez; ona içerik ya da bir boyut ver.
Bulanık ara renkler. Kırmızı ve yeşil gibi iki doygun zıt rengi karıştırmak sRGB'de gri kahverengiden geçer. Bir ara durak ekle ya da başka bir renk uzayında karıştır: linear-gradient(in oklch, red, green).
Büyük, ince gradyanlarda bantlanma. Geniş bir alana yayılan birbirine çok yakın renkler basamaklar gösterir; duraklar arasında biraz daha fazla kontrast yardımcı olur.

Sıkça Sorulan Sorular

CSS'te radial gradient nasıl yapılır?

background-image: radial-gradient(#93c5fd, #1e3a8a); kullan. Renklerin önüne bir şekil ve konum ekle, örneğin radial-gradient(circle at top left, #93c5fd, #1e3a8a).

radial-gradient'te circle ile ellipse arasındaki fark nedir?

ellipse (varsayılan) kutunun oranlarına göre esner, bu yüzden geniş bir kutuda geniştir. circle ise kutunun şekli ne olursa olsun gradyanı yuvarlak tutar.

Linear gradient'in yönü nasıl ayarlanır?

Önce bir yön ya da açı yaz: linear-gradient(to right, red, blue) ya da linear-gradient(45deg, red, blue). Varsayılan to bottom'dır (180deg); 0deg yukarıyı gösterir ve açılar saat yönünde döner.

Yumuşak bir geçiş yerine keskin çizgiler nasıl yapılır?

İki renge aynı durak konumunu ver: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) rengi ortada hiç geçiş olmadan değiştirir. repeating-linear-gradient bu tür durakların oluşturduğu bir deseni tekrarlar.

Gradyan background-color olarak kullanılabilir mi?

Hayır. Gradyan bir resimdir, bu yüzden background-image'a ya da background kısa yazımına yazılır. background-color: linear-gradient(...) geçersizdir ve yok sayılır.

İlgili kavramlar