{"id":31947,"date":"2025-10-15T22:41:14","date_gmt":"2025-10-15T19:41:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31947"},"modified":"2025-10-15T22:41:14","modified_gmt":"2025-10-15T19:41:14","slug":"csste-konik-gradyanlara-giris-temellerden-ileri-kullanimlara","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/csste-konik-gradyanlara-giris-temellerden-ileri-kullanimlara\/","title":{"rendered":"CSS’te Konik Gradyanlara Giri\u015f: Temellerden \u0130leri Kullan\u0131mlara"},"content":{"rendered":"

<\/p>\n

CSS’te Konik Gradyanlara Giri\u015f: Temellerden \u0130leri Kullan\u0131mlara<\/h2>\n

Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik, kullan\u0131c\u0131 deneyiminin temel ta\u015flar\u0131ndan biridir. Renkler, tipografi ve d\u00fczenlemelerle birlikte, gradyanlar da modern aray\u00fczlerin esteti\u011fini zenginle\u015ftiren g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. CSS’in sundu\u011fu linear-gradient()<\/code> ve radial-gradient()<\/code> fonksiyonlar\u0131 uzun s\u00fcredir tasar\u0131mc\u0131lar\u0131n ve geli\u015ftiricilerin hizmetindeyken, conic-gradient()<\/code> fonksiyonunun eklenmesiyle birlikte, renk ge\u00e7i\u015flerinin kullan\u0131m\u0131 yepyeni bir boyuta ula\u015fm\u0131\u015ft\u0131r. Bu makale, CSS’teki konik gradyanlar\u0131n ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, s\u00f6zdizimini ve \u00e7e\u015fitli pratik uygulamalar\u0131n\u0131 derinlemesine inceleyerek, bu g\u00fc\u00e7l\u00fc arac\u0131 projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi detayland\u0131racakt\u0131r. Temel prensiplerden ba\u015flayarak, geli\u015fmi\u015f tekniklere ve taray\u0131c\u0131 deste\u011fi gibi \u00f6nemli konulara de\u011finece\u011fiz.<\/p>\n

Gradyanlara K\u0131sa Bir Bak\u0131\u015f<\/h3>\n

Konik gradyanlara ge\u00e7meden \u00f6nce, CSS’teki di\u011fer gradyan t\u00fcrlerini k\u0131saca hat\u0131rlamak faydal\u0131 olacakt\u0131r. Gradyanlar, iki veya daha fazla renk aras\u0131nda p\u00fcr\u00fczs\u00fcz ge\u00e7i\u015fler olu\u015fturmak i\u00e7in kullan\u0131lan bir g\u00f6r\u00fcnt\u00fc t\u00fcr\u00fcd\u00fcr. Geleneksel olarak, CSS iki ana gradyan t\u00fcr\u00fc sunar:<\/p>\n

* linear-gradient()<\/code>:<\/strong> Belirli bir y\u00f6nde (\u00f6rne\u011fin, soldan sa\u011fa, yukar\u0131dan a\u015fa\u011f\u0131ya veya \u00e7apraz) d\u00fcz bir \u00e7izgi boyunca renk ge\u00e7i\u015fleri olu\u015fturur. Bu, genellikle arka planlara derinlik katmak, d\u00fc\u011fmelerde veya ba\u015fl\u0131klarda modern bir g\u00f6r\u00fcn\u00fcm sa\u011flamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, background-image: linear-gradient(to right, #ff7e5f, #feb47b);<\/code> kodu, soldan sa\u011fa do\u011fru turuncudan \u015feftali rengine bir ge\u00e7i\u015f olu\u015fturur.
\n* radial-gradient()<\/code>:<\/strong> Bir merkez noktas\u0131ndan d\u0131\u015far\u0131ya do\u011fru dairesel veya elips \u015feklinde renk ge\u00e7i\u015fleri olu\u015fturur. Bu, genellikle vurgu noktalar\u0131 olu\u015fturmak, \u0131\u015f\u0131k efektleri vermek veya vinyet efektleri uygulamak i\u00e7in tercih edilir. \u00d6rne\u011fin, background-image: radial-gradient(circle at center, #add8e6, #4682b4);<\/code> kodu, merkezden ba\u015flay\u0131p d\u0131\u015far\u0131ya do\u011fru a\u00e7\u0131k maviden koyu maviye dairesel bir ge\u00e7i\u015f sa\u011flar.<\/p>\n

Bu gradyan t\u00fcrleri, web tasar\u0131m\u0131na estetik bir boyut katarken, belirli g\u00f6rsel ihtiya\u00e7lar\u0131 kar\u015f\u0131lamakta yetersiz kalabiliyordu. \u00d6zellikle pasta grafikleri, kadranlar veya d\u00f6nen desenler gibi dairesel, a\u00e7\u0131l\u0131 renk ge\u00e7i\u015fleri olu\u015fturmak, genellikle karma\u015f\u0131k SVG veya JavaScript \u00e7\u00f6z\u00fcmleri gerektiriyordu. \u0130\u015fte tam bu noktada conic-gradient()<\/code> devreye girerek, bu t\u00fcr g\u00f6rsel efektleri saf CSS ile m\u00fcmk\u00fcn k\u0131larak geli\u015ftiricilere ve tasar\u0131mc\u0131lara b\u00fcy\u00fck bir esneklik sunmu\u015ftur. Konik gradyanlar, bir merkez noktas\u0131 etraf\u0131nda bir daire boyunca d\u00f6nerek renkleri yayar, bu da tamamen yeni bir g\u00f6rsel ifade bi\u00e7imi sa\u011flar.<\/p>\n

Konik Gradyanlar Nedir?<\/h2>\n

Konik gradyanlar (conic gradients), CSS’in image<\/code> veri t\u00fcr\u00fcn\u00fcn bir par\u00e7as\u0131 olarak tan\u0131mlanan, bir merkez noktas\u0131 etraf\u0131nda d\u00f6nerek renk ge\u00e7i\u015fleri olu\u015fturan \u00f6zel bir gradyan t\u00fcr\u00fcd\u00fcr. Di\u011fer gradyan t\u00fcrlerinden temel fark\u0131, renklerin bir eksen veya bir merkezden d\u0131\u015far\u0131 do\u011fru de\u011fil, bir merkez noktas\u0131 etraf\u0131nda dairesel bir yay boyunca, bir saat kadran\u0131 gibi d\u00f6nerek de\u011fi\u015fmesidir. Bunu, bir pasta grafi\u011finin dilimleri veya bir radar ekran\u0131ndaki tarama \u00e7izgisi gibi d\u00fc\u015f\u00fcnebilirsiniz. Renkler, dairenin \u00e7evresi boyunca belirli a\u00e7\u0131larda tan\u0131mlan\u0131r ve bu a\u00e7\u0131lar aras\u0131nda yumu\u015fak veya keskin ge\u00e7i\u015fler olu\u015fturur.<\/p>\n

conic-gradient()<\/code> fonksiyonu, bir veya daha fazla renk dura\u011f\u0131 (color stop) alarak \u00e7al\u0131\u015f\u0131r. Her renk dura\u011f\u0131, gradyan\u0131n hangi renkten ba\u015flayaca\u011f\u0131n\u0131 veya hangi renge ge\u00e7ece\u011fini ve bu ge\u00e7i\u015fin dairenin hangi a\u00e7\u0131s\u0131nda ger\u00e7ekle\u015fece\u011fini belirler. Varsay\u0131lan olarak, gradyan 0 dereceden (saat 12 y\u00f6n\u00fc) ba\u015flar ve saat y\u00f6n\u00fcnde ilerleyerek 360 dereceye kadar devam eder. Bu, \u00f6zellikle veri g\u00f6rselle\u015ftirmeleri, dairesel ilerleme \u00e7ubuklar\u0131 veya karma\u015f\u0131k geometrik desenler olu\u015fturmak i\u00e7in son derece g\u00fc\u00e7l\u00fc bir ara\u00e7 haline gelmesini sa\u011flar. Geleneksel gradyanlar\u0131n aksine, konik gradyanlar, merkezden d\u0131\u015far\u0131ya do\u011fru ayn\u0131 renkte kal\u0131rken, merkez etraf\u0131nda d\u00f6nen bir renk skalas\u0131 sunar. Bu temel fark, konik gradyanlar\u0131 bir\u00e7ok yarat\u0131c\u0131 kullan\u0131m senaryosu i\u00e7in vazge\u00e7ilmez k\u0131lar.<\/p>\n

conic-gradient()<\/code> S\u00f6zdizimi ve Temelleri<\/h2>\n

conic-gradient()<\/code> fonksiyonunun s\u00f6zdizimi, di\u011fer gradyan t\u00fcrlerine benzer olmakla birlikte, kendine \u00f6zg\u00fc parametreleri ve kullan\u0131m \u015fekilleri vard\u0131r. Bu b\u00f6l\u00fcmde, temel s\u00f6zdizimini, ba\u015flang\u0131\u00e7 a\u00e7\u0131s\u0131n\u0131, merkez noktas\u0131n\u0131 ve renk duraklar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Temel S\u00f6zdizimi<\/h3>\n

En basit haliyle, conic-gradient()<\/code> fonksiyonu sadece iki veya daha fazla renk de\u011feri alabilir:<\/p>\n

.element {\n  background-image: conic-gradient(red, yellow, blue);\n}<\/code><\/pre>\n
Bu \u00f6rnekte, gradyan red<\/code> renginden ba\u015flay\u0131p yellow<\/code> rengine, ard\u0131ndan blue<\/code> rengine ge\u00e7erek bir daire olu\u015fturacakt\u0131r. Renkler, dairenin \u00e7evresi boyunca e\u015fit olarak da\u011f\u0131t\u0131l\u0131r. red<\/code> 0 dereceden ba\u015flar, yellow<\/code> 120 derecede (360\/3) olur ve blue<\/code> 240 derecede (360*2\/3) olur, ard\u0131ndan tekrar red<\/code> rengine d\u00f6ner.<\/p>\n
\u00dc\u00e7 veya daha fazla renk kullan\u0131ld\u0131\u011f\u0131nda, renkler varsay\u0131lan olarak gradyan\u0131n toplam a\u00e7\u0131s\u0131 boyunca e\u015fit olarak da\u011f\u0131t\u0131l\u0131r. \u00d6rne\u011fin, d\u00f6rt renk kullan\u0131ld\u0131\u011f\u0131nda, her renk 90 derecelik bir aral\u0131\u011f\u0131 kaplar.<\/p>\n
Ba\u015flang\u0131\u00e7 A\u00e7\u0131s\u0131 (from<\/code>)<\/h3>\n
Konik gradyanlar\u0131n varsay\u0131lan ba\u015flang\u0131\u00e7 noktas\u0131, dairenin en \u00fcst noktas\u0131d\u0131r, yani saat 12 y\u00f6n\u00fc veya 0 derece. Ancak, bu ba\u015flang\u0131\u00e7 a\u00e7\u0131s\u0131n\u0131 from <\/code> parametresi ile de\u011fi\u015ftirebilirsiniz. A\u00e7\u0131 de\u011ferleri deg<\/code> (derece), grad<\/code> (gradyan), rad<\/code> (radyan) veya turn<\/code> (d\u00f6n\u00fc\u015f) birimleriyle belirtilebilir.<\/p>\n
*   0deg<\/code> veya 0turn<\/code>: En \u00fcst nokta (varsay\u0131lan).
\n*   90deg<\/code> veya 0.25turn<\/code>: Sa\u011f taraf.
\n*   180deg<\/code> veya 0.5turn<\/code>: En alt nokta.
\n*   270deg<\/code> veya 0.75turn<\/code>: Sol taraf.<\/p>\n
\u00d6rnek:<\/p>\n
.element-from-right {\n  background-image: conic-gradient(from 90deg, red, yellow, blue);\n}\n\n.element-from-bottom {\n  background-image: conic-gradient(from 180deg, red, yellow, blue);\n}<\/code><\/pre>\n
Bu, gradyan\u0131n ba\u015flang\u0131\u00e7 noktas\u0131n\u0131 saat y\u00f6n\u00fcnde belirli bir a\u00e7\u0131 kadar d\u00f6nd\u00fcrmenizi sa\u011flar, bu da gradyan\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde etkiler. \u00d6zellikle belirli bir g\u00f6rsel hizalama veya animasyon efekti gerekti\u011finde bu parametre \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
Merkez Noktas\u0131 (at<\/code>)<\/h3>\n
Varsay\u0131lan olarak, konik gradyan\u0131n merkezi, uyguland\u0131\u011f\u0131 eleman\u0131n tam ortas\u0131d\u0131r (center<\/code> veya 50% 50%<\/code>). Ancak, bu merkez noktas\u0131n\u0131 at <\/code> parametresi ile de\u011fi\u015ftirebilirsiniz. Pozisyon de\u011ferleri anahtar kelimelerle (top<\/code>, bottom<\/code>, left<\/code>, right<\/code>, center<\/code>) veya y\u00fczdelik de\u011ferlerle (25% 75%<\/code>) belirtilebilir.<\/p>\n
*   at center<\/code>: Ortada (varsay\u0131lan).
\n*   at top left<\/code>: Sol \u00fcst k\u00f6\u015fede.
\n*   at 25% 75%<\/code>: Soldan %25, yukar\u0131dan %75 konumunda.<\/p>\n
\u00d6rnek:<\/p>\n
.element-top-left {\n  background-image: conic-gradient(at top left, red, yellow, blue);\n}\n\n.element-custom-center {\n  background-image: conic-gradient(at 20% 80%, red, yellow, blue);\n}<\/code><\/pre>\n
Merkez noktas\u0131n\u0131 de\u011fi\u015ftirmek, gradyan\u0131n daire \u015feklinin eleman i\u00e7inde nas\u0131l konumland\u0131\u011f\u0131n\u0131 kontrol etmenizi sa\u011flar. Bu, \u00f6zellikle gradyan\u0131n eleman\u0131n belirli bir b\u00f6l\u00fcm\u00fcne odaklanmas\u0131 gerekti\u011finde veya asimetrik desenler olu\u015fturulurken faydal\u0131d\u0131r.<\/p>\n
Renk Duraklar\u0131 (Color Stops)<\/h3>\n
Renk duraklar\u0131, konik gradyanlar\u0131n en g\u00fc\u00e7l\u00fc ve esnek \u00f6zelliklerinden biridir. Her renk dura\u011f\u0131, bir renk de\u011feri ve iste\u011fe ba\u011fl\u0131 olarak bir veya iki a\u00e7\u0131 de\u011feri alabilir. A\u00e7\u0131 de\u011ferleri, o rengin gradyan boyunca nerede ba\u015flay\u0131p nerede bitece\u011fini belirler.<\/p>\n
*   Tek A\u00e7\u0131 De\u011feri:<\/strong> color value <\/code>
\n    Bu, rengin belirtilen a\u00e7\u0131da tam olarak g\u00f6r\u00fcnece\u011fi ve bir sonraki renge ge\u00e7i\u015fin ba\u015flayaca\u011f\u0131 anlam\u0131na gelir.<\/p>\n
.element-stops {\n      background-image: conic-gradient(red 0deg, yellow 90deg, blue 180deg, green 270deg, red 360deg);\n    }<\/code><\/pre>\n
    Bu \u00f6rnek, 0 dereceden 90 dereceye k\u0131rm\u0131z\u0131dan sar\u0131ya, 90’dan 180’e sar\u0131dan maviye vb. ge\u00e7i\u015fler olu\u015fturur. Son red 360deg<\/code> ifadesi, gradyan\u0131n sorunsuz bir \u015fekilde ba\u015flang\u0131\u00e7 rengine d\u00f6nmesini sa\u011flar, b\u00f6ylece kesintisiz bir d\u00f6ng\u00fc olu\u015fur.<\/p>\n
*   \u0130ki A\u00e7\u0131 De\u011feri:<\/strong> color value  <\/code>
\n    Bu s\u00f6zdizimi, rengin <\/code> ile <\/code> aras\u0131nda sabit kalmas\u0131n\u0131 (sert ge\u00e7i\u015f) veya belirli bir aral\u0131kta bir renk ge\u00e7i\u015fi olu\u015fturmas\u0131n\u0131 sa\u011flar. E\u011fer <\/code> ve <\/code> ayn\u0131 ise, o renk o a\u00e7\u0131da aniden belirir. E\u011fer farkl\u0131 ise, o renk <\/code>‘den ba\u015flay\u0131p <\/code>‘ye kadar uzan\u0131r ve bu aral\u0131kta ba\u015fka bir renk ge\u00e7i\u015fi olmaz.<\/p>\n
.element-hard-stop {\n      background-image: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg);\n    }<\/code><\/pre>\n
    Bu \u00f6rnek, her 90 derecelik dilimi tek bir renkle doldurarak, keskin ge\u00e7i\u015flere sahip d\u00f6rt renkli bir pasta grafi\u011fi olu\u015fturur. red<\/code> 0 ile 90 derece aras\u0131nda, blue<\/code> 90 ile 180 derece aras\u0131nda vb. g\u00f6r\u00fcnecektir.<\/p>\n
*   Y\u00fczdelik De\u011ferler:<\/strong> A\u00e7\u0131 de\u011ferleri yerine y\u00fczdelik de\u011ferler de kullanabilirsiniz. 0%<\/code> 0 dereceye, 100%<\/code> 360 dereceye kar\u015f\u0131l\u0131k gelir.<\/p>\n
.element-percentage-stops {\n      background-image: conic-gradient(red 0%, yellow 25%, blue 50%, green 75%, red 100%);\n    }<\/code><\/pre>\n
    Bu, a\u00e7\u0131 birimlerine al\u0131\u015fk\u0131n olmayanlar i\u00e7in daha sezgisel bir yakla\u015f\u0131m sunabilir.<\/p>\n
Renk duraklar\u0131n\u0131 dikkatli bir \u015fekilde kullanarak, \u00e7ok \u00e7e\u015fitli g\u00f6rsel efektler ve desenler olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. \u00d6zellikle sert ge\u00e7i\u015fler (hard stops), pasta grafikleri gibi belirli bir dilimin tam olarak belirli bir renkte olmas\u0131 gereken durumlar i\u00e7in idealdir.<\/p>\n
Pratik Uygulamalar ve \u00d6rnekler<\/h2>\n
Konik gradyanlar, web tasar\u0131m\u0131nda ve geli\u015ftirilmesinde bir\u00e7ok yarat\u0131c\u0131 uygulama alan\u0131 sunar. Bu b\u00f6l\u00fcmde, conic-gradient()<\/code>‘in en yayg\u0131n ve etkileyici kullan\u0131m senaryolar\u0131ndan baz\u0131lar\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n
Pasta Grafikleri (Pie Charts)<\/h3>\n
Konik gradyanlar\u0131n en bariz ve g\u00fc\u00e7l\u00fc kullan\u0131m alanlar\u0131ndan biri, pasta grafikleri olu\u015fturmakt\u0131r. Geleneksel olarak SVG veya JavaScript k\u00fct\u00fcphaneleriyle yap\u0131lan bu grafikler, art\u0131k saf CSS ile kolayca olu\u015fturulabilir.<\/p>\n
Tek bir conic-gradient()<\/code> ile bir pasta grafi\u011fi olu\u015fturmak i\u00e7in, her dilimin ba\u015flang\u0131\u00e7 ve biti\u015f a\u00e7\u0131lar\u0131n\u0131 hesaplaman\u0131z ve bunlar\u0131 renk duraklar\u0131 olarak belirtmeniz gerekir.<\/p>\n
\u00d6rnek: \u00dc\u00e7 dilimli bir pasta grafi\u011fi (\u00d6rn: %30, %20, %50)<\/p>\n
<\/div><\/code><\/pre>\n
.pie-chart {\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background: conic-gradient(\n    #ff6384 0% 30%,    \/ %30'luk dilim <\/em>\/\n    #36a2eb 30% 50%,    \/ %20'lik dilim (30+20=50) <\/em>\/\n    #ffcd56 50% 100%    \/ %50'lik dilim (50+50=100) <\/em>\/\n  );\n}<\/code><\/pre>\n
Bu \u00f6rnekte, her renk dura\u011f\u0131 bir dilimi temsil eder. #ff6384<\/code> rengi 0 dereceden 30 dereceye (%30) kadar uzan\u0131r. #36a2eb<\/code> rengi 30 dereceden 50 dereceye (%20) kadar uzan\u0131r ve #ffcd56<\/code> rengi 50 dereceden 100 dereceye (%50) kadar uzan\u0131r. A\u00e7\u0131lar\u0131n y\u00fczdelik de\u011ferlerle belirtilmesi, hesaplamalar\u0131 daha sezgisel hale getirir.<\/p>\n
Halka Grafikler (Donut Charts)<\/h3>\n
Pasta grafiklerinin bir varyasyonu olan halka grafikleri (donut charts), ortas\u0131 bo\u015f olan dairesel grafiklerdir. Konik gradyanlar\u0131 kullanarak halka grafikleri olu\u015fturmak i\u00e7in birka\u00e7 y\u00f6ntem mevcuttur. En yayg\u0131n y\u00f6ntemlerden biri, border-radius<\/code> ile dairesel bir eleman olu\u015fturmak ve ard\u0131ndan mask<\/code> veya ::before<\/code>\/::after<\/code> pseudo-elemanlar\u0131n\u0131 kullanarak i\u00e7 bo\u015flu\u011fu olu\u015fturmakt\u0131r.<\/p>\n
\u00d6rnek:<\/p>\n
<\/div><\/code><\/pre>\n
.donut-chart {\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background: conic-gradient(\n    #ff6384 0% 30%,\n    #36a2eb 30% 50%,\n    #ffcd56 50% 100%\n  );\n  \/ \u0130\u00e7 bo\u015flu\u011fu olu\u015fturmak i\u00e7in mask kullanma <\/em>\/\n  mask: radial-gradient(farthest-side, transparent calc(100% - 30px), #000 0);\n  \/ Alternatif olarak, ::before veya ::after ile de yap\u0131labilir <\/em>\/\n  \/*\n  position: relative;\n  &::before {\n    content: '';\n    position: absolute;\n    top: 15px;\n    left: 15px;\n    width: calc(100% - 30px);\n    height: calc(100% - 30px);\n    background-color: white; \/ veya arka plan rengi <\/em>\/\n    border-radius: 50%;\n  }\n  *\/\n}<\/code><\/pre>\n
Bu \u00f6rnekte, mask<\/code> \u00f6zelli\u011fi, d\u0131\u015f halkay\u0131 korurken i\u00e7 k\u0131sm\u0131 \u015feffaf hale getirerek halka grafi\u011fi efekti yarat\u0131r. calc(100% - 30px)<\/code> ifadesi, halkan\u0131n kal\u0131nl\u0131\u011f\u0131n\u0131 belirler.<\/p>\n
Desenler ve Arka Planlar<\/h3>\n
Konik gradyanlar, karma\u015f\u0131k ve tekrarlayan desenler olu\u015fturmak i\u00e7in de m\u00fckemmeldir. \u00d6zellikle repeating-conic-gradient()<\/code> ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, geometrik ve soyut arka planlar tasarlamak \u00e7ok kolayla\u015f\u0131r.<\/p>\n
*   Damal\u0131 Tahta (Checkerboard) Deseni:<\/strong><\/p>\n
.checkerboard {\n      width: 200px;\n      height: 200px;\n      background: conic-gradient(white 0% 25%, black 25% 50%, white 50% 75%, black 75% 100%);\n      background-size: 50% 50%; \/ Gradien'in tekrar etme boyutunu belirle <\/em>\/\n    }<\/code><\/pre>\n
    Bu \u00f6rnek, tek bir conic-gradient<\/code> kullanarak ve background-size<\/code> ile tekrarlatarak basit bir damal\u0131 tahta deseni olu\u015fturur. Ancak repeating-conic-gradient<\/code> bu t\u00fcr desenler i\u00e7in daha do\u011frudan bir yol sunar.<\/p>\n
*   Tekrarlayan \u015eeritler:<\/strong><\/p>\n
.striped-background {\n      width: 300px;\n      height: 300px;\n      background: repeating-conic-gradient(\n        #eee 0deg 10deg,\n        #ccc 10deg 20deg\n      );\n    }<\/code><\/pre>\n
    Bu \u00f6rnek, a\u00e7\u0131k gri ve koyu gri \u015feritlerden olu\u015fan dairesel bir desen olu\u015fturur. Her \u015ferit 10 derecelik bir a\u00e7\u0131y\u0131 kaplar ve gradyan otomatik olarak tekrar eder.<\/p>\n
Y\u00fckleme Animasyonlar\u0131 (Loading Spinners)<\/h3>\n
Konik gradyanlar, modern ve estetik y\u00fckleme animasyonlar\u0131 (spinners) olu\u015fturmak i\u00e7in de kullan\u0131labilir. Gradyan\u0131n bir k\u0131sm\u0131n\u0131 \u015feffaf veya daha a\u00e7\u0131k bir renkle birle\u015ftirip, bu gradyan\u0131 d\u00f6nd\u00fcrerek ak\u0131c\u0131 bir animasyon elde edebilirsiniz.<\/p>\n
\u00d6rnek:<\/p>\n
<\/div><\/code><\/pre>\n
.spinner {\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n  background: conic-gradient(#8e44ad 0deg 90deg, transparent 90deg 360deg);\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}<\/code><\/pre>\n
Bu \u00f6rnekte, conic-gradient<\/code> morun d\u00f6rtte birini (0-90 derece) ve geri kalan\u0131n\u0131 \u015feffaf olarak tan\u0131mlar. Ard\u0131ndan, @keyframes<\/code> ve animation<\/code> \u00f6zellikleri ile bu gradyan s\u00fcrekli olarak d\u00f6nd\u00fcr\u00fclerek bir y\u00fckleme efekti yarat\u0131l\u0131r.<\/p>\n
UI Elemanlar\u0131 ve S\u0131n\u0131rlar (UI Elements & Borders)<\/h3>\n
Konik gradyanlar, d\u00fc\u011fmeler, kartlar veya di\u011fer UI elemanlar\u0131 i\u00e7in \u00e7ekici gradyan kenarl\u0131klar veya arka planlar olu\u015fturmak i\u00e7in de kullan\u0131labilir. \u00d6zellikle border-image<\/code> veya mask<\/code> \u00f6zellikleri ile birle\u015ftirildi\u011finde, \u00e7ok \u00e7e\u015fitli g\u00f6rsel efektler elde edilebilir.<\/p>\n
\u00d6rnek: Gradyan kenarl\u0131kl\u0131 bir d\u00fc\u011fme<\/p>\n