Ana Sayfa
Renk Araçları
Radyal Gradyan Oluşturucu

CSS Radyal Gradyan Oluşturucu Özel şekil, konum ve renklerle CSS radyal gradyanları oluşturun.

🎨

Radyal Gradyan Oluşturucu

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

Renkleri Seçin

Gradyan için merkez rengini ve kenar rengini ayarlayın.

Şekli Yapılandırın

Daire veya elips şeklini seçin ve merkezi konumu ayarlayın.

CSS Kodunu Kopyalayın

Projeniz için oluşturulan CSS kodunu kopyalayın.

Loading tool...

What Is Radyal Gradyan Oluşturucu?

Bir radyal gradyan oluşturucu, bir merkez noktasından dairesel veya elips şeklinde dışa doğru yayılan CSS gradientlerini oluşturur. Doğru bir çizgi boyunca geçiş yapan lineer gradyanlardan farklı olarak, radyal gradyanlar modern web tasarımında yaygın olarak kullanılan spot ışık benzeri efektler, parlayan küreler ve derinlik efektleri yaratır. Gradyan şeklini (daire veya elips), merkez konumunu ve renkleri kontrol edebilirsiniz. Oluşturucu, tüm modern tarayıcılarda çalışan CSS radial-gradient() kodunu üretir. Radyal gradyanlar, özellikle görsel derinlik oluşturma, kahraman bölümlerinde spot ışık efektleri, dekoratif arka planlar ve düz tasarımları daha boyutlu hissettiren ince aydınlatma efektleri yaratmak için etkilidir.

Why Use Radyal Gradyan Oluşturucu?

Farklı efektler için daire ve elips şekil seçenekleri
X/Y kaydırıcıları ile ayarlanabilir merkez konumu
Ayarlar değiştirildikçe canlı önizleme güncellemeleri
Temiz, üretim hazır CSS çıktısı
Kayıt olmadan ücretsiz olarak kullanma

Common Use Cases

Spot Işık Efektleri

Hero bölümleri veya ürün resimleri üzerinde odak çekecek spot ışık efektleri oluşturun.

Parlama Efektleri

Kartlar, modallar veya süsleme elemanları için parlayan orb arka planları oluşturun.

Derinlik ve Boyut

Düz tasarımlara görsel derinlik eklemek için ince radyal renk geçişleri kullanın.

Vignette Efektleri

Resimler üzerinde sinematik bir görünüm için koyu kenarlı vignette'ler oluşturun.

Technical Guide

CSS radial-gradient(), bir noktadan yayılan bir gradyan oluşturur. Sözdizimi: radial-gradient(şekil konum, renk1, renk2). Şekil "daire" (tüm yönlerde eşit yarıçap) veya "elips" (yarıçap eleman oranına eşittir) olabilir. Konum, yüzde değerleri kullanır (50% 50% merkez noktasıdır). En yakın-kenar, en uzak-köşe gibi boyut anahtar kelimeleri, gradyanın ne kadar uzayacağını kontrol eder. Renk durakları, lineer gradyanlarda olduğu gibi çalışır. Tarayıcı, renkleri merkezden dışa doğru konsantre daireler veya elipslerde aralar. Radyal gradyanlar bileşiktir - multiple radyal gradyanları, karmaşık efektler gibi birden fazla ışık kaynağı için background-image'de virgül ayırma kullanarak katmanlayabilirsiniz.

Tips & Best Practices

1
Mükemmel yuvarlak gradyanlar için "daire" ve boyut oranına duyarlı şekiller için "elips" kullanın
2
Asimetrik aydınlatma efektleri için merkezi merkezden uzaklaştırın (ör. %30 %30)
3
Karmaşık çoklu ışık kaynağı efektleri için birden fazla radyal gradyan katmanını birleştirin
4
Arka planlar üzerinde ince solma efektleri için kenar rengi olarak şeffaf kullanın
5
Yaratıcı örtme efektleri için background-blend-mode ile birleştirin

Related Tools

Renk Seçici

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

🎨 Color Tools

Doğrusal Gradyan Oluşturucu

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

🎨 Color Tools

Konik Gradyan Jeneratörü

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

🎨 Color Tools

Renk Karıştırıcı

Ayarlabilir oran ile iki rengi birleştirin ve tam gradientı görün.

🎨 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 Daire ve elips arasındaki fark nedir?

Daire, eleman boyutlarından bağımsız olarak mükemmel bir yuvarlak gradyan oluşturur. Elips, elemanların boyut oranına göre uzar ve kare olmayan elemanlarda oval bir şekil oluşturur.

Q Merkezi her yere konumlayabilir miyim?

Evet, X ve Y konum kaydırıcıları (0-100%) kullanarak. Varsayılan değer 50% 50% (merkezidir). Onu taşıyarak asimetrik, merkezden uzak aydınlatma efektleri oluşturabilirsiniz.

Q Radyal gradyan tüm tarayıcılarda destekleniyor mu?

Evet, radial-gradient() tüm modern tarayıcılar tarafından satıcı ön ekleri olmadan desteklenmektedir.

About This Tool

Radyal Gradyan Oluşturucu 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.