Ana Sayfa
Renk Araçları
Konik Gradyan Jeneratörü

CSS Konik Gradyan Oluşturucu Pasta grafikleri, renk çarkları ve süpürme efektleri için CSS konik gradyanlar oluşturun.

🎨

Konik Gradyan Jeneratörü

Pasta grafikleri, renk çarkları ve süpürme efektleri için CSS konik gradyanlar oluşturun.

Renkleri Ayarla

Konik süpürme için üç renk seçin.

Ayarları Uyarla

Başlangıç açısını ve merkez konumunu ayarlayın.

CSS'yi Kopyala

Oluşturulan konik-gradyan CSS kodunu kopyalayın.

Loading tool...

What Is Konik Gradyan Jeneratörü?

Bir konik gradyan oluşturucu, renkleri açısal olarak geçiş yapan CSS gradient'lerini merkezi bir noktaya doğru süpürerek oluşturur. Konik gradient'ler merkezi bir noktayı döndürerek, renk tekerlekleri, pizza grafik benzeri segmentler, saat yüzleri ve süpürme renk geçişleri oluşturmak için idealdir. Bu araç size üç rengi seçme, başlangıç açısını ayarlama ve merkez noktasını konumlandırma imkanı tanır. Sonuç olarak elde edilen CSS conic-gradient() kodu, başlangıç renklerine geri sarılan pürüzsüz açısal geçişler oluşturur. Konik gradient'ler, SVG veya Canvas gerektirecek görsel efektleri mümkün kılan güçlü bir CSS özelliğidir ve tasarımlarınızı saf CSS ve GPU hızlandırmasıyla korur.

Why Use Konik Gradyan Jeneratörü?

Doğrusal/radyal gradyanlarla imkansız olan süpürme açılı renk geçişlerini oluşturun
Döndürme kontrolü için ayarlanabilir başlangıç açısı
Özelleştirilmiş merkez konumu için merkezden uzak efektler
Süsleme arka planları ve veri görselleştirmeleri için idealdir
Üretim kullanımı için temiz CSS çıktısı

Common Use Cases

Renk Çarkları

Konik gradyanlar kullanarak yağmur rengi renk çarkı arka planları oluşturun.

Pasta Grafikler

Sert renk duraklarıyla birlikte sadece CSS ile basit pasta grafikleri oluşturun.

Süsleme Arka Planları

Bölümler ve kartlar için benzersiz açılı gradyan arka planları oluşturun.

Yükleniyor Simgeleri

Konik gradyan yaylarıyla birlikte sadece CSS ile yükleniyor simgeleri tasarlayın.

Technical Guide

CSS conic-gradient(), merkezi bir noktaya doğru renk geçişleri oluşturur. Sözdizimi: conic-gradient(from açısı posX posY, renk1, renk2, ..., renk1). "From" açısı başlangıç konumunu döndürür (varsayılan 0deg = üst). Renkler, açıkça açı durakları belirtilmedikçe 360° süpürme etrafında eşit olarak dağıtılır. İlk rengi son durak olarak tekrarlamak, sorunsuz bir döngü oluşturur. Pizza grafik efektleri için yüzde duraklarını kullanın: conic-gradient(kırmızı 0% 25%, mavi 25% 50%, yeşil 50% 75%, sarı 75%). Konik gradient'ler Chrome 69+, Firefox 83+, Safari 12.1+ ve Edge 79+'da desteklenmektedir. Border-radius: 50% ile maskeleyebilir ve karmaşık şekiller için mask-image ile birleştirilebilir.

Tips & Best Practices

1
Sürekli dairesel geçişler için ilk rengi son durak olarak tekrarlayın
2
Pasta grafik segmentleri için sert durakları (aynı yüzde, iki renk) kullanın
3
Dairesel renk çarkı efektleri için border-radius: 50% ile birleştirin
4
"From" açısı tüm gradyanı döndürür - animasyonlu efektler için yararlıdır
5
Karmaşık desenler oluşturmak için birden fazla konik gradyan katmanlayın

Related Tools

Renk Seçici

HEX, RGB, HSL ve CMYK çıktıları ile etkileşimli renk seçici.

🎨 Color Tools

Renk Uyum Çarkı

Beş farklı uyumluluk türüne sahip etkileşimli renk çarkı ve görsel seçim.

🎨 Color Tools

Doğrusal Gradyan Oluşturucu

Özel renkler, açı ve renk durakları ile CSS doğrusal gradyanlar oluşturun.

🎨 Color Tools

Radyal Gradyan Oluşturucu

Özel şekil, konum ve renklerle CSS radyal gradyanları oluşturun.

🎨 Color Tools

CSS Filtre Oluşturucu

Görsel kontroller ile bulanıklaştırma, parlaklık, kontrast ve daha fazlası gibi CSS filtre efektlerini uygulayın.

🎨 CSS & Design

Frequently Asked Questions

Q Konik gradyan nedir?

Bir konik gradyan, renkleri bir merkez nokta etrafında açısal olarak süpürerek geçiş yapar. Doğrusal (doğru çizgi) ve radyal (merkezden dışarıya doğru) gradyanlardan farklıdır.

Q Konik gradyanlarla pasta grafikler oluşturabilir miyim?

Evet! Keskin segmentler oluşturmak için sert renk durakları (aynı yüzde iki renk) kullanın. Örneğin: conic-gradient(kırmızı 0% 30%, mavi 30% 70%, yeşil 70%).

Q Konik-gradyan iyi destekleniyor mu?

2020 yılından bu yana Chrome, Firefox, Safari ve Edge dahil tüm modern tarayıcılar tarafından unterstütlenmektedir. Geniş bir benimseme ile CSS Images Level 4 özelliğidir.

About This Tool

Konik Gradyan Jeneratörü is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.