{"id":40744,"date":"2026-02-28T22:40:40","date_gmt":"2026-02-28T19:40:40","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=40744"},"modified":"2026-02-28T22:40:40","modified_gmt":"2026-02-28T19:40:40","slug":"csste-radyal-gradyanlar-derinlemesine-bir-inceleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/","title":{"rendered":"CSS’te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme"},"content":{"rendered":"

<\/p>\n

CSS’te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme<\/h2>\n

Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve kullan\u0131c\u0131 deneyimi, bir sitenin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu hedeflere ula\u015fmak i\u00e7in geli\u015ftiricilerin elindeki en g\u00fc\u00e7l\u00fc ara\u00e7lardan biri de CSS gradyanlar\u0131d\u0131r. Gradyanlar, iki veya daha fazla rengin yumu\u015fak bir ge\u00e7i\u015fle harmanlanmas\u0131yla olu\u015fan g\u00f6rsel efektlerdir. Bu makalede, \u00f6zellikle “Radyal Gradyanlar” konusunu ele alacak, temelden ileri d\u00fczeye t\u00fcm detaylar\u0131n\u0131, s\u00f6zdizimini, kullan\u0131m senaryolar\u0131n\u0131 ve ipu\u00e7lar\u0131n\u0131 kapsaml\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Radyal gradyanlar, bir merkez noktas\u0131ndan d\u0131\u015far\u0131ya do\u011fru dairesel veya eliptik bir \u015fekilde yay\u0131lan renk ge\u00e7i\u015fleri olu\u015fturman\u0131za olanak tan\u0131r. Bu sayede, d\u00fc\u011fmelerden arka planlara, kart tasar\u0131mlar\u0131ndan \u00f6zel efektlere kadar bir\u00e7ok farkl\u0131 \u00f6\u011feye derinlik, vurgu ve estetik bir dokunu\u015f katabilirsiniz. Geleneksel olarak bu t\u00fcr efektler i\u00e7in resim dosyalar\u0131 kullan\u0131l\u0131rd\u0131, ancak CSS gradyanlar\u0131 sayesinde taray\u0131c\u0131 taraf\u0131ndan do\u011frudan olu\u015fturulan vekt\u00f6rel tabanl\u0131 grafikler elde ederiz. Bu durum, daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri, daha iyi performans, daha kolay \u00f6l\u00e7eklenebilirlik (retina ekranlar dahil) ve daha esnek d\u00fczenlemeler anlam\u0131na gelir. Herhangi bir \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte piksellenme olmaks\u0131z\u0131n harika g\u00f6r\u00fcn\u00fcrler ve CSS ile kolayca manip\u00fcle edilebilirler.<\/p>\n

Radyal Gradyanlar\u0131n Temel S\u00f6zdizimi ve Kullan\u0131m\u0131<\/h3>\n

CSS’te radyal gradyanlar, background-image<\/code> \u00f6zelli\u011fi ile radial-gradient()<\/code> fonksiyonu kullan\u0131larak tan\u0131mlan\u0131r. Temel s\u00f6zdizimi a\u015fa\u011f\u0131daki gibidir:<\/p>\n

background-image: radial-gradient([shape || size] [at position], color-stop1, color-stop2, ...);<\/code><\/pre>\n
Bu s\u00f6zdizimini par\u00e7alara ay\u0131rarak her bir bile\u015fenin ne anlama geldi\u011fini ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 inceleyelim:<\/p>\n
*   shape<\/code> (\u015eekil):<\/strong> Gradyan\u0131n \u015feklini belirler. \u0130ki ana de\u011feri vard\u0131r:
\n    *   circle<\/code>: Gradyan\u0131 dairesel bir \u015fekilde olu\u015fturur.
\n    *   ellipse<\/code>: Gradyan\u0131 eliptik bir \u015fekilde olu\u015fturur. Bu, varsay\u0131lan de\u011ferdir ve genellikle kapsay\u0131c\u0131 \u00f6\u011fenin boyutlar\u0131na uyacak \u015fekilde otomatik olarak ayarlan\u0131r.
\n*   size<\/code> (Boyut):<\/strong> Gradyan\u0131n biti\u015f \u015feklinin boyutunu belirler. Bu anahtar kelimeler, gradyan\u0131n en d\u0131\u015ftaki renginin nerede duraca\u011f\u0131n\u0131 tan\u0131mlar.
\n*   at position<\/code> (Konum):<\/strong> Gradyan\u0131n merkez noktas\u0131n\u0131 belirler. Varsay\u0131lan olarak center<\/code> (merkez) de\u011ferindedir.
\n*   color-stop<\/code> (Renk Dura\u011f\u0131):<\/strong> Gradyanda kullan\u0131lacak renkleri ve bu renklerin ge\u00e7i\u015f noktalar\u0131n\u0131 tan\u0131mlar. En az iki renk dura\u011f\u0131 belirtmek zorunludur.<\/p>\n
\u015eimdi bu bile\u015fenleri daha detayl\u0131 inceleyelim.<\/p>\n
\u015eekillerle \u00c7al\u0131\u015fma: Daire ve Elips<\/h3>\n
Radyal gradyan\u0131n g\u00f6rsel karakterini belirleyen ilk parametre \u015fekildir. circle<\/code> ve ellipse<\/code> olmak \u00fczere iki temel se\u00e7ene\u011fimiz vard\u0131r.<\/p>\n
Daire (circle) \u015eekli<\/h4>\n
circle<\/code> anahtar kelimesi, gradyan\u0131n m\u00fckemmel bir daire \u015feklinde yay\u0131lmas\u0131n\u0131 sa\u011flar. Bu, genellikle bir vurgu noktas\u0131, bir \u0131\u015f\u0131k kayna\u011f\u0131 veya dairesel bir desen olu\u015fturmak istedi\u011finizde tercih edilir.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
.daire-gradient {\n    background-image: radial-gradient(circle, red, yellow, green);\n    width: 200px;\n    height: 200px;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, red<\/code> merkezde ba\u015flar, yellow<\/code> ortada bir ge\u00e7i\u015f olu\u015fturur ve green<\/code> dairenin en d\u0131\u015f kenar\u0131nda biter. circle<\/code> kullan\u0131ld\u0131\u011f\u0131nda, gradyan\u0131n boyutu otomatik olarak kapsay\u0131c\u0131 \u00f6\u011fenin en k\u00fc\u00e7\u00fck boyutuna (geni\u015flik veya y\u00fckseklik) g\u00f6re ayarlan\u0131r ve bir daire olu\u015fturur. E\u011fer kapsay\u0131c\u0131 \u00f6\u011fe kare ise, tam bir daire elde edersiniz. Dikd\u00f6rtgen bir kapsay\u0131c\u0131da ise, en k\u0131sa kenar\u0131 temel alan bir daire olu\u015facakt\u0131r.<\/p>\n
Elips (ellipse) \u015eekli<\/h4>\n
ellipse<\/code> anahtar kelimesi, gradyan\u0131n eliptik bir \u015fekilde yay\u0131lmas\u0131n\u0131 sa\u011flar. Bu, genellikle daha do\u011fal g\u00f6r\u00fcn\u00fcml\u00fc bir \u0131\u015f\u0131kland\u0131rma efekti veya kapsay\u0131c\u0131 \u00f6\u011fenin boyutlar\u0131na daha iyi uyum sa\u011flayan bir ge\u00e7i\u015f istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r. ellipse<\/code> varsay\u0131lan \u015fekil de\u011feridir, yani belirtmezseniz otomatik olarak bu \u015fekilde davran\u0131r.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
.elips-gradient {\n    background-image: radial-gradient(ellipse, red, yellow, green);\n    width: 300px;\n    height: 150px;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, gradyan eliptik bir \u015fekilde yay\u0131l\u0131r. Kapsay\u0131c\u0131 \u00f6\u011fenin geni\u015fli\u011fi ve y\u00fcksekli\u011fi farkl\u0131 oldu\u011fu i\u00e7in, elips bu boyutlara uyacak \u015fekilde gerilir veya s\u0131k\u0131\u015ft\u0131r\u0131l\u0131r. Merkezde red<\/code>, ard\u0131ndan yellow<\/code> ve en d\u0131\u015fta green<\/code> renkleri bulunur. ellipse<\/code> kullan\u0131ld\u0131\u011f\u0131nda, gradyan\u0131n boyutu kapsay\u0131c\u0131 \u00f6\u011fenin geni\u015fli\u011fi ve y\u00fcksekli\u011fine g\u00f6re orant\u0131l\u0131 olarak ayarlan\u0131r.<\/p>\n
Boyut Anahtar Kelimeleri (Size Keywords) Detayl\u0131 \u0130nceleme<\/h3>\n
Gradyan\u0131n \u015feklini belirledikten sonra, boyut anahtar kelimeleri gradyan\u0131n en d\u0131\u015ftaki renginin ne kadar geni\u015f bir alan\u0131 kaplayaca\u011f\u0131n\u0131 ve nerede sona erece\u011fini kontrol etmemizi sa\u011flar. Bu anahtar kelimeler, gradyan\u0131n merkezinden yay\u0131lan en d\u0131\u015ftaki \u015feklin (daire veya elips) kapsay\u0131c\u0131 \u00f6\u011fenin kenarlar\u0131na veya k\u00f6\u015felerine g\u00f6re nas\u0131l boyutland\u0131r\u0131laca\u011f\u0131n\u0131 belirler.<\/p>\n
*   closest-side<\/code> (En Yak\u0131n Kenar):<\/strong> Gradyan, merkezinden kapsay\u0131c\u0131 \u00f6\u011fenin en yak\u0131n kenar\u0131na ula\u015facak \u015fekilde boyutland\u0131r\u0131l\u0131r.
\n    *   circle<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, dairenin yar\u0131\u00e7ap\u0131 merkezin en yak\u0131n kenara olan uzakl\u0131\u011f\u0131na e\u015fit olur.
\n    *   ellipse<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, elipsin eksenleri merkezin en yak\u0131n dikey ve yatay kenarlara olan uzakl\u0131klar\u0131na e\u015fit olur.
\n*   farthest-side<\/code> (En Uzak Kenar):<\/strong> Gradyan, merkezinden kapsay\u0131c\u0131 \u00f6\u011fenin en uzak kenar\u0131na ula\u015facak \u015fekilde boyutland\u0131r\u0131l\u0131r. Bu, ellipse<\/code> i\u00e7in varsay\u0131lan boyut de\u011feridir.
\n    *   circle<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, dairenin yar\u0131\u00e7ap\u0131 merkezin en uzak kenara olan uzakl\u0131\u011f\u0131na e\u015fit olur.
\n    *   ellipse<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, elipsin eksenleri merkezin en uzak dikey ve yatay kenarlara olan uzakl\u0131klar\u0131na e\u015fit olur.
\n*   closest-corner<\/code> (En Yak\u0131n K\u00f6\u015fe):<\/strong> Gradyan, merkezinden kapsay\u0131c\u0131 \u00f6\u011fenin en yak\u0131n k\u00f6\u015fesine ula\u015facak \u015fekilde boyutland\u0131r\u0131l\u0131r. Bu, circle<\/code> i\u00e7in varsay\u0131lan boyut de\u011feridir.
\n    *   circle<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, dairenin yar\u0131\u00e7ap\u0131 merkezin en yak\u0131n k\u00f6\u015feye olan uzakl\u0131\u011f\u0131na e\u015fit olur.
\n    *   ellipse<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, elipsin eksenleri, merkezin en yak\u0131n k\u00f6\u015feye olan uzakl\u0131\u011f\u0131na g\u00f6re ayarlan\u0131r, ancak bu biraz daha karma\u015f\u0131kt\u0131r \u00e7\u00fcnk\u00fc elipsin eksenleri yatay ve dikey hizal\u0131d\u0131r.
\n*   farthest-corner<\/code> (En Uzak K\u00f6\u015fe):<\/strong> Gradyan, merkezinden kapsay\u0131c\u0131 \u00f6\u011fenin en uzak k\u00f6\u015fesine ula\u015facak \u015fekilde boyutland\u0131r\u0131l\u0131r. Bu, genel radial-gradient()<\/code> fonksiyonu i\u00e7in varsay\u0131lan boyut de\u011feridir (yani shape<\/code> veya size<\/code> belirtilmedi\u011finde).
\n    *   circle<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, dairenin yar\u0131\u00e7ap\u0131 merkezin en uzak k\u00f6\u015feye olan uzakl\u0131\u011f\u0131na e\u015fit olur.
\n    *   ellipse<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, elipsin eksenleri, merkezin en uzak k\u00f6\u015feye olan uzakl\u0131\u011f\u0131na g\u00f6re ayarlan\u0131r.<\/p>\n
Bu boyut anahtar kelimeleri, gradyan\u0131n merkezinin konumu ile birlikte \u00e7al\u0131\u015ft\u0131\u011f\u0131nda \u00e7ok daha belirgin hale gelir. \u00d6rne\u011fin, at top left<\/code> ile farthest-corner<\/code> kullanmak, gradyan\u0131n sol \u00fcst k\u00f6\u015feden ba\u015flay\u0131p sa\u011f alt k\u00f6\u015feye kadar yay\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n
\u00d6rnekler:<\/strong><\/p>\n
.gradient-closest-side {\n    background-image: radial-gradient(circle closest-side at 20% 20%, blue, lightblue);\n    width: 200px;\n    height: 200px;\n}\n\n.gradient-farthest-corner {\n    background-image: radial-gradient(ellipse farthest-corner at 75% 25%, green, lightgreen);\n    width: 300px;\n    height: 150px;\n}<\/code><\/pre>\n
\u0130lk \u00f6rnekte, gradyan\u0131n merkezi sol \u00fcst k\u00f6\u015feye yak\u0131n (20% 20%). closest-side<\/code> ile daire, bu merkezin en yak\u0131n kenar\u0131na (sol veya \u00fcst) de\u011fecek \u015fekilde boyutland\u0131r\u0131l\u0131r. \u0130kinci \u00f6rnekte, gradyan\u0131n merkezi sa\u011f \u00fcst k\u00f6\u015feye yak\u0131n (75% 25%). farthest-corner<\/code> ile elips, bu merkezin en uzak k\u00f6\u015fesine (sol alt) de\u011fecek \u015fekilde boyutland\u0131r\u0131l\u0131r.<\/p>\n
Konumland\u0131rma (Positioning)<\/h3>\n
at position<\/code> parametresi, radyal gradyan\u0131n merkez noktas\u0131n\u0131 belirler. Bu, gradyan\u0131n g\u00f6rsel a\u011f\u0131rl\u0131\u011f\u0131n\u0131 ve yay\u0131l\u0131m y\u00f6n\u00fcn\u00fc kontrol etmek i\u00e7in \u00e7ok \u00f6nemlidir. Varsay\u0131lan de\u011fer center<\/code>‘d\u0131r.<\/p>\n
Konumland\u0131rma i\u00e7in \u00e7e\u015fitli y\u00f6ntemler kullanabiliriz:<\/p>\n
*   Anahtar Kelimeler:<\/strong> top<\/code>, bottom<\/code>, left<\/code>, right<\/code>, center<\/code>. Bunlar\u0131 birle\u015ftirerek top left<\/code>, bottom right<\/code> gibi konumlar olu\u015fturabilirsiniz.
\n    *   at top<\/code>: at top center<\/code> ile ayn\u0131d\u0131r.
\n    *   at left<\/code>: at center left<\/code> ile ayn\u0131d\u0131r.
\n*   Y\u00fczdesel De\u011ferler:<\/strong> at 50% 50%<\/code> (merkez), at 10% 20%<\/code> (sol \u00fcstten %10, \u00fcstten %20). \u0130lk de\u011fer yatay (x ekseni), ikinci de\u011fer dikey (y ekseni) konumu belirtir.
\n*   Uzunluk De\u011ferleri:<\/strong> at 50px 100px<\/code> (sol kenardan 50px, \u00fcst kenardan 100px).<\/p>\n
\u00d6rnekler:<\/strong><\/p>\n
.gradient-top-left {\n    background-image: radial-gradient(at top left, purple, pink);\n    width: 200px;\n    height: 200px;\n}\n\n.gradient-custom-position {\n    background-image: radial-gradient(at 70% 30%, orange, yellow);\n    width: 200px;\n    height: 200px;\n}<\/code><\/pre>\n
Bu \u00f6rneklerde, gradyan\u0131n merkezi s\u0131ras\u0131yla sol \u00fcst k\u00f6\u015fede ve \u00f6\u011fenin %70 yatay, %30 dikey konumunda yer almaktad\u0131r. Bu, gradyan\u0131n yay\u0131l\u0131m\u0131n\u0131 ve \u0131\u015f\u0131kland\u0131rma efektini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde de\u011fi\u015ftirir.<\/p>\n
Renk Duraklar\u0131 (Color Stops) ve Da\u011f\u0131l\u0131m\u0131<\/h3>\n
Renk duraklar\u0131, radyal gradyanlar\u0131n en temel ve en esnek bile\u015fenidir. Gradyanda hangi renklerin kullan\u0131laca\u011f\u0131n\u0131 ve bu renklerin ge\u00e7i\u015f noktalar\u0131n\u0131 belirlerler. En az iki renk dura\u011f\u0131 belirtmek zorunludur.<\/p>\n
Temel Renk Duraklar\u0131<\/h4>\n
Sadece renk isimleri veya kodlar\u0131 belirterek otomatik bir ge\u00e7i\u015f olu\u015fturabilirsiniz.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
.temel-renk-duragi {\n    background-image: radial-gradient(red, blue, green);\n    width: 200px;\n    height: 200px;\n}<\/code><\/pre>\n
Bu durumda, red<\/code> merkezde ba\u015flar, blue<\/code> ortada bir ge\u00e7i\u015f noktas\u0131 olur ve green<\/code> en d\u0131\u015fta biter. Taray\u0131c\u0131, renkleri e\u015fit aral\u0131klarla da\u011f\u0131t\u0131r.<\/p>\n
Y\u00fczdesel ve Uzunluk De\u011ferleri ile Kontrol<\/h4>\n
Renk duraklar\u0131na y\u00fczdesel (%<\/code>) veya uzunluk (px<\/code>, em<\/code>, rem<\/code> vb.) de\u011ferleri ekleyerek renklerin ge\u00e7i\u015f noktalar\u0131n\u0131 hassas bir \u015fekilde kontrol edebilirsiniz.<\/p>\n
*   Y\u00fczdesel De\u011ferler:<\/strong> Gradyan\u0131n toplam boyutunun bir y\u00fczdesi olarak renk ge\u00e7i\u015f noktas\u0131n\u0131 belirler. 0%<\/code> merkez, 100%<\/code> ise en d\u0131\u015f kenard\u0131r.
\n*   Uzunluk De\u011ferleri:<\/strong> Gradyan\u0131n merkezinden itibaren belirli bir piksel veya di\u011fer uzunluk birimi cinsinden renk ge\u00e7i\u015f noktas\u0131n\u0131 belirler.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
.yuzdesel-renk-duragi {\n    background-image: radial-gradient(red 0%, blue 50%, green 100%);\n    width: 200px;\n    height: 200px;\n}\n\n.uzunluk-renk-duragi {\n    background-image: radial-gradient(red, blue 50px, green);\n    width: 200px;\n    height: 200px;\n}<\/code><\/pre>\n
\u0130lk \u00f6rnekte, red<\/code> merkezden ba\u015flar, %50 noktas\u0131nda blue<\/code>‘ya d\u00f6n\u00fc\u015f\u00fcr ve %100 noktas\u0131nda green<\/code>‘e d\u00f6n\u00fc\u015f\u00fcr. \u0130kinci \u00f6rnekte, red<\/code> merkezden ba\u015flar ve 50 piksel uzakl\u0131kta blue<\/code>‘ya d\u00f6n\u00fc\u015f\u00fcr, ard\u0131ndan green<\/code>‘e ge\u00e7i\u015f yapar.<\/p>\n
Keskin Ge\u00e7i\u015fler (Hard Stops) Olu\u015fturma<\/h4>\n
\u0130ki renk dura\u011f\u0131n\u0131 ayn\u0131 y\u00fczde veya uzunluk de\u011ferine ayarlayarak keskin, ani renk ge\u00e7i\u015fleri olu\u015fturabilirsiniz. Bu, \u00e7izgili veya bloklu desenler olu\u015fturmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
.keskin-gecis {\n    background-image: radial-gradient(circle, red 0%, red 50%, blue 50%, blue 100%);\n    width: 200px;\n    height: 200px;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, gradyan\u0131n %0’\u0131ndan %50’sine kadar k\u0131rm\u0131z\u0131 kal\u0131r, sonra %50’de aniden maviye d\u00f6ner ve %100’e kadar mavi kal\u0131r. Bu, k\u0131rm\u0131z\u0131 ve mavi aras\u0131nda net bir \u00e7izgi olu\u015fturur.<\/p>\n
\u00c7oklu Renk Duraklar\u0131 ve Ge\u00e7i\u015fler<\/h4>\n
\u0130stedi\u011finiz kadar renk dura\u011f\u0131 ekleyerek karma\u015f\u0131k ve \u00e7ok renkli gradyanlar olu\u015fturabilirsiniz.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
.coklu-renkler {\n    background-image: radial-gradient(circle, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);\n    width: 250px;\n    height: 250px;\n}<\/code><\/pre>\n
Bu \u00f6rnek, bir g\u00f6kku\u015fa\u011f\u0131 efekti olu\u015fturur. Renkler otomatik olarak e\u015fit aral\u0131klarla da\u011f\u0131t\u0131l\u0131r.<\/p>\n
Tekrarlayan Radyal Gradyanlar: repeating-radial-gradient()<\/code><\/h3>\n
Bazen belirli bir radyal deseni s\u00fcrekli olarak tekrarlamak isteyebilirsiniz. \u0130\u015fte bu noktada repeating-radial-gradient()<\/code> fonksiyonu devreye girer. Bu fonksiyon, temel radial-gradient()<\/code> ile ayn\u0131 s\u00f6zdizimine sahiptir, ancak belirtilen renk duraklar\u0131 deseni, kapsay\u0131c\u0131 \u00f6\u011feyi doldurana kadar tekrar eder.<\/p>\n
Anahtar Fark:<\/strong> repeating-radial-gradient()<\/code>‘de, son renk dura\u011f\u0131 bir d\u00f6ng\u00fcn\u00fcn sonunu i\u015faretler ve bir sonraki d\u00f6ng\u00fc hemen o noktadan ba\u015flar. Bu nedenle, genellikle son renk dura\u011f\u0131n\u0131n konumu, ilk renk dura\u011f\u0131n\u0131n konumundan daha b\u00fcy\u00fck bir de\u011ferde olmal\u0131d\u0131r ki bir desen aral\u0131\u011f\u0131 olu\u015fsun.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
.tekrarli-gradient {\n    background-image: repeating-radial-gradient(circle, red 0%, red 10%, blue 10%, blue 20%);\n    width: 250px;\n    height: 250px;\n}<\/code><\/pre>\n
Bu \u00f6rnekte:
\n*   red 0%, red 10%<\/code>: Merkezden %10’a kadar k\u0131rm\u0131z\u0131 bir halka olu\u015fturur.
\n*   blue 10%, blue 20%<\/code>: %10’dan %20’ye kadar mavi bir halka olu\u015fturur.
\nBu 0-20% aral\u0131\u011f\u0131ndaki desen (10% k\u0131rm\u0131z\u0131, 10% mavi) daha sonra t\u00fcm kapsay\u0131c\u0131 \u00f6\u011feyi doldurana kadar tekrar eder. Bu sayede e\u015fmerkezli k\u0131rm\u0131z\u0131 ve mavi halkalar olu\u015fur.<\/p>\n
Daha Karma\u015f\u0131k Tekrarlar:<\/strong><\/p>\n
.tekrarli-karma\u015f\u0131k {\n    background-image: repeating-radial-gradient(\n        circle closest-side,\n        #f0f 0%,\n        #f0f 5px,\n        #0ff 5px,\n        #0ff 10px\n    );\n    width: 300px;\n    height: 300px;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, mor ve camg\u00f6be\u011fi renklerinde 5 piksellik keskin halkalar, closest-side<\/code> boyutland\u0131rmas\u0131yla tekrar tekrar olu\u015fturulur.<\/p>\n
\u0130leri D\u00fczey Kullan\u0131m Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h3>\n
Radyal gradyanlar, sadece basit arka planlar olu\u015fturman\u0131n \u00f6tesinde, yarat\u0131c\u0131 ve karma\u015f\u0131k tasar\u0131mlar i\u00e7in de kullan\u0131labilir.<\/p>\n
\u00c7oklu Gradyanlar (Multiple Gradients)<\/h4>\n
background-image<\/code> \u00f6zelli\u011fi, birden fazla gradyan\u0131 virg\u00fclle ay\u0131rarak katmanlaman\u0131za olanak tan\u0131r. Taray\u0131c\u0131, ilk gradyan\u0131 en \u00fcste, son gradyan\u0131 en alta yerle\u015ftirir. Bu sayede karma\u015f\u0131k desenler veya efektler olu\u015fturabilirsiniz.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
.coklu-katman {\n    background-image:\n        radial-gradient(circle at top left, rgba(255,0,0,0.5), transparent 50%),\n        radial-gradient(circle at bottom right, rgba(0,0,255,0.5), transparent 50%),\n        linear-gradient(to right, #ccc, #eee); \/ En alttaki katman <\/em>\/\n    width: 300px;\n    height: 200px;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, k\u0131rm\u0131z\u0131 bir yar\u0131 saydam daire sol \u00fcst k\u00f6\u015fede, mavi bir yar\u0131 saydam daire sa\u011f alt k\u00f6\u015fede ve bunlar\u0131n alt\u0131nda gri bir do\u011frusal gradyan arka plan bulunur. transparent<\/code> (\u015feffaf) renk dura\u011f\u0131 kullanmak, alttaki katmanlar\u0131n g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n
Pseudo-elementler ile Gradyanlar<\/h4>\n
::before<\/code> ve ::after<\/code> pseudo-elementlerini kullanarak, HTML yap\u0131n\u0131za ek bir \u00f6\u011fe eklemeden gradyan efektleri olu\u015fturabilirsiniz. Bu, \u00f6zellikle bir \u00f6\u011fenin \u00fczerine veya alt\u0131na bir gradyan katman\u0131 eklemek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
.kart::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.2), transparent 70%);\n    pointer-events: none; \/ Etkile\u015fimlerin ana \u00f6\u011feye ge\u00e7mesini sa\u011flar <\/em>\/\n}<\/code><\/pre>\n
Bu \u00f6rnek, bir kart\u0131n \u00fczerine hafif, yans\u0131ma benzeri bir parlakl\u0131k efekti ekler.<\/p>\n
Animasyon ve Ge\u00e7i\u015fler (Animation and Transitions)<\/h4>\n
Radyal gradyanlar\u0131n baz\u0131 \u00f6zelliklerini (\u00f6rne\u011fin background-position<\/code> veya renk duraklar\u0131n\u0131n konumlar\u0131n\u0131) animasyon veya ge\u00e7i\u015flerle de\u011fi\u015ftirebilirsiniz. Bu, etkile\u015fimli veya dinamik arka planlar olu\u015fturmak i\u00e7in harika bir yoldur.<\/p>\n
\u00d6rnek (Background Position Animasyonu):<\/strong><\/p>\n
.animasyonlu-gradient {\n    background-image: radial-gradient(circle at 0% 0%, #f0f, #0ff);\n    background-size: 200% 200%; \/ Gradyan\u0131 daha b\u00fcy\u00fck yaparak hareket alan\u0131 sa\u011flar <\/em>\/\n    transition: background-position 0.5s ease-in-out;\n    width: 200px;\n    height: 200px;\n}\n\n.animasyonlu-gradient:hover {\n    background-position: 100% 100%; \/ Hover'da gradyan\u0131n merkezini hareket ettir <\/em>\/\n}<\/code><\/pre>\n
Bu \u00f6rnekte, fare \u00fczerine gelindi\u011finde gradyan\u0131n merkezi yumu\u015fak bir \u015fekilde hareket eder ve dinamik bir efekt olu\u015fturur.<\/p>\n
Performans ve Taray\u0131c\u0131 Deste\u011fi<\/h4>\n
Modern taray\u0131c\u0131lar (Chrome, Firefox, Safari, Edge) radyal gradyanlar\u0131 sorunsuz bir \u015fekilde destekler. CSS gradyanlar\u0131, resim dosyalar\u0131na g\u00f6re genellikle daha iyi performans sunar \u00e7\u00fcnk\u00fc taray\u0131c\u0131 taraf\u0131ndan do\u011frudan olu\u015fturulur ve HTTP iste\u011fi gerektirmez. Eski taray\u0131c\u0131lar i\u00e7in (\u00f6rne\u011fin IE9 ve alt\u0131) gradyanlar desteklenmeyebilir. Bu durumda, yedek (fallback) olarak d\u00fcz bir renk veya bir resim kullanmak iyi bir uygulamad\u0131r:<\/p>\n
.yedek-gradient {\n    background-color: #ccc; \/ Yedek renk <\/em>\/\n    background-image: radial-gradient(circle, #f0f, #0ff); \/ Modern taray\u0131c\u0131lar i\u00e7in <\/em>\/\n}<\/code><\/pre>\n
Eri\u015filebilirlik (Accessibility)<\/h4>\n
Gradyanlar kullan\u0131rken eri\u015filebilirli\u011fi g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir. \u00d6zellikle metin \u00fczerinde gradyanlar kullan\u0131yorsan\u0131z, metnin okunabilirli\u011fini sa\u011flamak i\u00e7in yeterli kontrast oldu\u011fundan emin olun. Renk k\u00f6rl\u00fc\u011f\u00fc olan kullan\u0131c\u0131lar i\u00e7in baz\u0131 renk ge\u00e7i\u015fleri zorlay\u0131c\u0131 olabilir. Bilgiyi sadece renkle de\u011fil, ayn\u0131 zamanda di\u011fer g\u00f6rsel ipu\u00e7lar\u0131yla da iletmeye \u00e7al\u0131\u015f\u0131n.<\/p>\n
Pratik \u00d6rnekler<\/h3>\n
Radyal gradyanlar, web tasar\u0131m\u0131nda \u00e7ok \u00e7e\u015fitli kullan\u0131m alanlar\u0131na sahiptir. \u0130\u015fte baz\u0131 pratik \u00f6rnekler:<\/p>\n
*   Vurgulu Arka Planlar:<\/strong> Bir sayfa b\u00f6l\u00fcm\u00fcne veya bir moda odak noktas\u0131 olu\u015fturmak i\u00e7in kullan\u0131labilir. \u00d6rne\u011fin, bir kahraman b\u00f6l\u00fcm\u00fcn\u00fcn ortas\u0131na yumu\u015fak bir parlakl\u0131k eklemek.
\n*   D\u00fc\u011fme ve Kart Tasar\u0131mlar\u0131:<\/strong> D\u00fc\u011fmelere veya kartlara derinlik ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in idealdir. Hafif bir radyal gradyan, bir d\u00fc\u011fmeye bas\u0131ld\u0131\u011f\u0131nda veya \u00fczerine gelindi\u011finde ho\u015f bir g\u00f6rsel geri bildirim sa\u011flayabilir.
\n*   Sim\u00fclasyonlar:<\/strong> I\u015f\u0131kland\u0131rma efektleri, lens parlamalar\u0131 veya su dalgalanmalar\u0131 gibi do\u011fal g\u00f6r\u00fcnen efektleri sim\u00fcle etmek i\u00e7in kullan\u0131labilir. \u00d6zellikle repeating-radial-gradient()<\/code> ile su damlas\u0131 veya dalga efektleri olu\u015fturulabilir.
\n*   Desenler ve Dokular:<\/strong> repeating-radial-gradient()<\/code> ile geometrik desenler, noktalar, halkalar veya di\u011fer soyut dokular olu\u015fturulabilir. Bu, arka planlara veya belirli \u00f6\u011felere benzersiz bir karakter katabilir.
\n*   Vinyet Efektleri:<\/strong> Bir foto\u011fraf\u0131n veya \u00f6\u011fenin kenarlar\u0131n\u0131 koyula\u015ft\u0131rarak merkeze odaklanmay\u0131 sa\u011flayan vinyet efektleri olu\u015fturmak i\u00e7in kullan\u0131labilir.<\/p>\n
\u00d6rnek: Vinyet Efekti<\/strong><\/p>\n
.vinyet {\n    width: 400px;\n    height: 300px;\n    background-image: url('resim.jpg'); \/ Altta bir resim <\/em>\/\n    background-size: cover;\n    background-position: center;\n    position: relative;\n}\n\n.vinyet::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-image: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.7) 100%);\n}<\/code><\/pre>\n
Bu \u00f6rnekte, bir resmin \u00fczerine, ortas\u0131 \u015feffaf kenarlar\u0131 koyu olan bir eliptik gradyan yerle\u015ftirilerek vinyet efekti olu\u015fturulmu\u015ftur.<\/p>\n
Sonu\u00e7<\/h3>\n
CSS radyal gradyanlar, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine dinamik, esnek ve performansl\u0131 g\u00f6rsel efektler olu\u015fturma g\u00fcc\u00fc veren g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. circle<\/code> ve ellipse<\/code> gibi \u015fekil se\u00e7eneklerinden closest-side<\/code> ve farthest-corner<\/code> gibi boyut anahtar kelimelerine, hassas konumland\u0131rmadan \u00e7oklu renk duraklar\u0131na kadar sundu\u011fu geni\u015f kontrol yelpazesi sayesinde, hayal g\u00fcc\u00fcn\u00fcz\u00fcn s\u0131n\u0131rlar\u0131n\u0131 zorlayabilirsiniz.<\/p>\n
repeating-radial-gradient()<\/code> ile karma\u015f\u0131k ve tekrarlayan desenler olu\u015fturma yetene\u011fi, bu arac\u0131n \u00e7ok y\u00f6nl\u00fcl\u00fc\u011f\u00fcn\u00fc daha da art\u0131r\u0131r. \u00c7oklu gradyanlar ve pseudo-elementler ile birle\u015ftirildi\u011finde, sadece CSS kullanarak zengin ve katmanl\u0131 tasar\u0131mlar elde etmek m\u00fcmk\u00fcnd\u00fcr. Performans avantajlar\u0131 ve geni\u015f taray\u0131c\u0131 deste\u011fi, radyal gradyanlar\u0131 modern web projeleri i\u00e7in vazge\u00e7ilmez k\u0131lar.<\/p>\n
Bu makalede ele al\u0131nan detaylar ve \u00f6rnekler, radyal gradyanlar\u0131n temelini anlaman\u0131za ve ileri d\u00fczey teknikleri uygulaman\u0131za yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r. Denemekten \u00e7ekinmeyin, farkl\u0131 parametreleri birle\u015ftirin ve yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 kullanarak web projelerinize benzersiz g\u00f6rsel dokunu\u015flar kat\u0131n. Radyal gradyanlar, web aray\u00fczlerinizi daha \u00e7ekici, daha etkile\u015fimli ve daha ak\u0131lda kal\u0131c\u0131 hale getirmek i\u00e7in sonsuz olanaklar sunar.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CSS’te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve kullan\u0131c\u0131 deneyimi, bir sitenin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-40744","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS'te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS'te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme\" \/>\n<meta property=\"og:description\" content=\"CSS'te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve kullan\u0131c\u0131 deneyimi, bir sitenin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-28T19:40:40+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS’te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme\",\"datePublished\":\"2026-02-28T19:40:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/\"},\"wordCount\":2524,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/\",\"name\":\"CSS'te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-28T19:40:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS’te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS'te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS'te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme","og_description":"CSS'te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve kullan\u0131c\u0131 deneyimi, bir sitenin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir.","og_url":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-28T19:40:40+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS’te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme","datePublished":"2026-02-28T19:40:40+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/"},"wordCount":2524,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/","url":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/","name":"CSS'te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-28T19:40:40+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/csste-radyal-gradyanlar-derinlemesine-bir-inceleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS’te Radyal Gradyanlar: Derinlemesine Bir \u0130nceleme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=40744"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40744\/revisions"}],"predecessor-version":[{"id":40745,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40744\/revisions\/40745"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=40744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=40744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=40744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}