CSS gradient animasyonu yapılabilir mi?

Doğrudan background-image: linear-gradient() üzerinde CSS transition çalışmaz; tarayıcılar bu değeri interpolate edemez. Ancak iki yaygın geçici çözüm vardır: background-position animasyonu (büyük boyutlu gradient arka planını kaydırmak) veya pseudo-element ::after ile opacity geçişi. Modern tarayıcılar @property ile CSS Houdini kullanılarak gerçek gradient animasyonu mümkündür: renk değerlerini @property ile kayıt ettirip transition uygulayabilirsiniz.

Linear ve radial gradient farkı nedir?

Linear gradient, renk geçişini bir doğru boyunca uygular; açı değeriyle yönü belirlersiniz (0deg = yukarıdan aşağı, 90deg = soldan sağa). Radial gradient ise merkezi bir noktadan dışa doğru yayılır; daire veya elips şeklinde olabilir. Tasarımda linear daha yaygın ve öngörülebilir; radial ise vignette, odak noktası veya ışık etkisi oluşturmak için kullanılır.

Gradient arka planı Retina ekranlarda bulanık görünür mü?

Hayır. CSS gradient'lar vektörel olarak hesaplanır; piksel yoğunluğundan bağımsız keskin görünür. Bu, raster görsel (PNG, JPEG) kullanmaya göre önemli bir avantajdır. Retina veya 4K ekranlarda ek srcset veya @2x dosyası gerekmez; gradient her zaman cihazın doğal çözünürlüğünde render edilir.

Tasarım Aracı

CSS Gradient Oluşturucu

Linear ve radial CSS degrade oluşturun, canlı önizleyin ve kodu kopyalayın.

Aci 135°

Renk Duragi

CSS Kodu

Hazir Gradientler

CSS Gradient Nedir ve Neden Kullanılır?

CSS gradient'lar, ek görsel dosya yüklenmeksizin renk geçişleri oluşturur. PNG veya JPEG yerine saf CSS kullanmanın avantajları şunlardır: sıfır ek HTTP isteği, her çözünürlükte keskin görünüm (vektörel hesaplama), dinamik renk değişikliği imkanı ve çok küçük CSS boyutu. background veya background-image özelliğinde kullanılabilir.

Renk Durağı (Color Stop) Mantığı

Her renk durağı iki bilgi içerir: renk ve konum (0%-100%). Konum, geçişin hangi noktada o rengde olduğunu belirtir. İki renk durağı en basit gradienttir; ancak sınır yoktur. Sert kenar elde etmek için iki durağı aynı konuma koyun: red 50%, blue 50%. Bu teknik renk bantları ve vektörel çizgili desenler oluşturmak için kullanılır.

Sik Sorulan Sorular

Conic gradient nedir?

CSS'de üç temel gradient türü vardır: linear (doğrusal), radial (dairesel merkez) ve conic (açısal). Conic gradient, renk geçişini merkez etrafında bir saat yönünde döndürür; pasta grafik, renk teker veya parlayan ışık efekti oluşturmak için idealdir. Sözdizimi: conic-gradient(from 0deg, red, yellow, green, red). Tüm modern tarayıcılarda (Chrome 69+, Firefox 83+, Safari 12.1+) desteklenir.

İlgili araçlar: Renk Paleti Üretici · Glassmorphism Üretici · Box Shadow Generator