CSS Gradient Oluşturucu

CSS Gradyanı Nedir?

CSS gradient oluşturucu, gradient sözdizimini elle yazmak zorunda kalmadan düzgün renk geçişleri oluşturmanıza yardımcı olan görsel bir araçtır. CSS'te gradyan, tarayıcı tarafından herhangi bir görüntü dosyası olmaksızın doğrudan işlenen, iki veya daha fazla renk arasındaki düzgün bir geçiştir. CSS Image Module Level 4 belirtimi, gradient fonksiyonlarını bir görüntü değeri türü olarak tanımlar; bu da background-image, list-style-image veya border-image değerinin kabul edildiği her yerde kullanılabilecekleri anlamına gelir. Tarayıcı gradyanları oluşturma zamanında rasterleştirdiğinden, bunlar herhangi bir çözünürlüğe ölçeklenebilir ve yüksek DPI ekranlarda asla bulanık artifaktlar oluşturmaz. CSS gradient oluşturucu kullanmak, renkleri ve konumları görsel olarak ayarlayıp bitmiş CSS kuralını kopyalamanızı sağlayarak hem zaman kazandırır hem de tahmin etme gereksinimini ortadan kaldırır.

CSS üç ana gradient şekli destekler: düz bir çizgi boyunca ilerleyen doğrusal (linear), merkez noktasından dışarıya yayılan radyal (radial) ve merkez noktası etrafında dönen konik (conic). Her şekil bir renk durağı listesi kabul eder; burada rengi ve isteğe bağlı olarak bir konumu (yüzde veya uzunluk) belirtirsiniz. Tarayıcı, duraklar arasındaki renkleri varsayılan olarak sRGB renk uzayını kullanarak ara değerle hesaplar; ancak CSS Color Level 4, algısal açıdan daha düzgün geçişler için oklch ve lab gibi başka renk uzaylarının belirtilmesine de olanak tanır.

Gradyanlar, web üzerindeki çoğu dekoratif amaç için görüntü tabanlı arka planların yerini almıştır. Tek bir CSS kuralı, bir zamanlar Photoshop'tan dışa aktarma ve HTTP isteği gerektiren şeyi üretmektedir. Çözünürlükten bağımsızdırlar, CSS'in kendisinin ötesinde sıfır ağ bant genişliği tüketirler ve standart CSS özellikleriyle animasyona alınabilir veya geçiş uygulanabilir. Gradient sözdizimi 2013'ten bu yana tüm önemli tarayıcılarda kararlı bir şekilde çalışmakta olup öneksiz biçimi Chrome, Firefox, Safari ve Edge'de geri dönüş olmaksızın çalışır.

Bu CSS Gradient Oluşturucuyu Neden Kullanmalısınız?

Gradient sözdizimini elle yazmak, durak konumlarını tahmin etmek, açı değerlerini kontrol etmek ve sonucu görmek için sayfayı defalarca yenilemek anlamına gelir. Görsel bir araç, gradyanı oluştururken görmenizi, durakları sürükleyerek ayarlamanızı ve görünüm doğru olduğunda CSS'i kopyalamanızı sağlar.

CSS Gradient Oluşturucu Kullanım Senaryoları

CSS Gradient Türleri Referansı

CSS beş gradient fonksiyonu tanımlar. Üç temel tür (linear, radial, conic) her biri deseni döşeyen bir tekrarlayan (repeating) varyantına sahiptir. repeating-linear-gradient() ve repeating-radial-gradient(), çizgili arka planlar ve eş merkezli halkalar için kullanışlıdır. Tüm gradient fonksiyonları CSS renk biçimlerinde renk duraklarını kabul eder: HEX, RGB, HSL, adlandırılmış renkler veya oklch. Chrome, Firefox, Safari ve Edge dahil tüm beş fonksiyon için tarayıcı desteği pratikte evrenseldir; satıcı öneki gerekmez.

Doğrusal, Radyal ve Konik Gradyanların Karşılaştırması

Her gradient türü renkleri farklı bir geometriye eşler. Doğru türü seçmek, aralarındaki kalite farkına değil, ihtiyaç duyduğunuz görsel etkiye bağlıdır. Çoğu sayfa arka planı ve bölüm ayırıcı için doğrusal gradient doğru varsayılan seçimdir; nedeni en basit ve farklı boyutlardaki öğelerde en öngörülebilir olmasıdır. Radyal ve konik gradyanlar, dairesel veya dönel geometrinin süslemeden çok anlam taşıdığı belirli görsel efektler için ayrılmıştır.

Kod Örnekleri

JavaScript, Python, CSS ve Go'da CSS gradyanlarını programatik olarak oluşturma ve uygulama örnekleri. Her biri, stil sayfalarında veya satır içi stillerde doğrudan kullanabileceğiniz geçerli CSS gradient dizeleri üretir.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

Sıkça Sorulan Sorular