Volade Ekosistemi — Web Aracı

Ücretsiz CSS Gradyan Üreticisi Çevrimiçi

Birkaç saniyede doğrusal, radyal ve konik CSS degradeanları oluşturun: türü seçin, açıyı ve renk duraklarını ayarlayın, sonucu canlı önizleyin, ardından yapıştırmaya hazır kodu kopyalayın. Hesap yok, veri gönderimi yok: her şey tarayıcınızda gerçekleşir.

12 Ekim 2026'da güncellendi

Degradeanımı oluştur Giriş yap
Veri gönderilmiyor Tasarımdan gizli Ücretsiz başlangıç
Araç

Degradeanınızı oluşturun, CSS'i kopyalayın

Degradean türü, açı, renkler ve konumlar: hepsi önizlemede canlı olarak güncellenir. CSS kodu aşağıda hazır.

CSS Gradyan Üreticisi

Çevrimiçi Tasarım & Yaratıcılık
Giriş yap
Yerel üretim — Volade hiçbir şey almıyor Hazır
CSS kodu
0Duraklar
0°Açı
0Karakterler
Hızlı örnekler:
0,0 0Yorum Tüm araçlar
Ücretsiz mi, Premium mu?

CSS degradean üreticisi ücretsiz ve sınırsız: hesap olmadan istediğiniz kadar oluşturun. Degradean tarayıcınızda oluşturulur — hiçbir sunucu kullanılmaz.

3 tür: doğrusal, radyal, konikÜcretsiz
Açı, başlangıç konumu ve renk durakları ayarlanabilirÜcretsiz
Canlı önizleme ve tek tıkla kopyalanabilir CSS koduÜcretsiz
Tam premium ekosistem (CMS, masaüstü, betikler, API)Premium
Premium'u keşfet
Özellikler

Tam kapsamlı bir CSS degradean üreticisi

Doğrusal, radyal ve konik: CSS'in üç ailesi

Tek tıkla bir aileden diğerine geçin: aynı durak seti otomatik olarak linear-gradient(), radial-gradient() veya conic-gradient() biçimine dönüşür. Açı ve başlangıç konumu seçilen türe göre gösterilir veya gizlenir.

Tümü seç

Hassas açı ve tamamen serbest renk durakları

Açıyı 0'dan 360°'ye ayarlayın, her renk duraklarını 0–100% aralığında dilediğiniz yere taşıyın, ihtiyacınız kadar durak ekleyin. Her durağın onaltılık değeri klavyeden de düzenlenebilir; kurumsal renginizi yapıştırabilirsiniz.

İnce renk ayarı

Canlı önizleme ve yapıştırmaya hazır CSS kodu

Her değişiklik büyük önizlemede hemen görünür. Tam kod — background: linear-gradient(…); — aracın altında yazılır. «Kopyala»'ya tek tıklama, kodu panoya alır; CSS'iniz, JSX'iniz veya satır içi stiliniz için hazırdır.

CSS'imi kopyala

Gizli: degradeanınız cihazınızda kalır

Üretim tamamen tarayıcınızda çalışır: hiçbir şey gönderilmez, hiçbir şey sunucuda saklanmaz. Son oluşturmanız, kaldığınız yerden devam etmek için cihazınızda yerel olarak saklanır — grafik paleti üzerinde iterasyon yapmak için idealdir.

Gizlilik politikası
Nasıl çalışır

Üç adımda CSS degradeanı oluşturun

Türü seçin

Yönlü bir arka plan için doğrusal, bir hale için radyal, bir halka için konik. Etkin düğme kodu hemen yeniden biçimlendirir ve seçilen aileye uygun ayarları gösterir.

Açı ve renkleri ayarlayın

Açı kaydırıcısını hareket ettirin, radyal ve konik degradeanlar için başlangıç noktasını (X/Y) konumlandırın, ardından her durağı ayarlayın: renk seçici, onaltılık değer ve yüzde konumu. Daha zengin geçişler için durak ekleyin.

CSS kodunu kopyalayın

Tam satır aracın altında görünür. «Kopyala»'ya tıklayın ve stil sayfanıza, bileşeninize veya düzenleyicinize yapıştırın — CSS'in desteklendiği her yerde degradean aynı görünür.

SSS

CSS degradeanları hakkında sık sorulan sorular

CSS degradeanı nedir?
CSS degradeanı, iki veya daha fazla renk arasında, linear-gradient(), radial-gradient() veya conic-gradient() işlevleri sayesinde tarayıcı tarafından doğrudan çizilen kademeli bir geçiştir. Bir görüntünün aksine, degradean vektörseldir: her çözünürlükte net kalır, birkaç düzine bayt ağırlığındadır ve tamamen CSS ile ayarlanır.
Doğrusal, radyal ve konik degradean arasındaki fark nedir?
Doğrusal degradean düz bir çizgi boyunca ilerler (açı derece cinsinden): başlık arka planı veya düğme için idealdir. Radyal degradean merkezi bir noktadan başlar ve daire veya elipse yayılır: bir hale veya kahraman arka planı için mükemmeldir. Konik degradean bir noktanın etrafında, saatin akrebi gibi döner: bir halka, pasta grafik veya kenarlık efekti için mükemmeldir.
Doğrusal degradeanın açısı nasıl kontrol edilir?
Açı, linear-gradient( hemen ardından derece (deg) olarak ifade edilir: 0deg yukarıyı, 90deg sağı, 180deg aşağıyı gösterir. Araç değeri Açı kaydırıcısının konumundan otomatik üretir — siz sadece kodu kopyalayın.
Renk durakları (color stops) nedir?
Bir renk durağı, bir rengi degradean boyunca bir konumla (yüzde) eşleştirir. Basit bir degradean için iki durak yeterlidir; daha fazlasını eklemek bantlar, daha yumuşak geçişler veya çok renkli efektler oluşturur. Her durağı Konum kaydırıcısıyla taşıyabilir, tek tıkla durak ekleyip silebilirsiniz.
Üretilen degradeanı CSS'imde nasıl kullanırım?
Çıki alanındaki satırı kopyalayın, ardından stil sayfanıza veya satır içi stile yapıştırın: background: linear-gradient(...);. Ayrıca mask için color-image, görsel yer tutucu veya yedek renk üzerine katmanlanan background-image değeri olarak da kullanabilirsiniz.
CSS degradeanları tüm tarayıcılarda çalışır mı?
Evet: linear-gradient ve radial-gradient, mobil dahil tüm modern tarayıcılardan yıllardır desteklenir. conic-gradient de Chrome, Firefox, Safari ve Edge'in güncel sürümlerinde desteklenir. Eski tarayıcılar için basitçe düz bir renk yedeği hazırlayın.
Bir görselin üzerine degradean katmanlayabilir miyim?
Evet: background (kısayol) özelliğinde, degradeanı görselden önce listeleyin — background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Degradean görselin üstünde görünür; rgba() değerleri örtünün saydamlığını kontrol etmenizi sağlar.
Araç gizli ve ücretsiz mi?
Evet: üretim tamamen tarayıcınızda gerçekleşir; sunucuya hiçbir şey gönderilmez ve cihazınızın dışında hiçbir şey saklanmaz (konforunuz için son oluşturmanızın localStorage hariç). Araç tamamen ücretsiz, sınırsız ve hesap gerektirmeden hem masaüstünde hem mobilde erişilebilir.
Tam kılavuz

CSS degradeanları hakkında bilmeniz gerekenler

CSS degradeanı bir arka planı, düğmeyi veya kartı süslemenin en hafif ve en esnek yolu haline geldi. Bir görsel düzenleyiciden PNG dışa aktarmaya gerek yok: tarayıcı, renkleriniz arasındaki geçişi vektörel olarak, birkaç düzine baytta hesaplar. CSS degradean üretecisi ise Volade ekranda düzenlerken tam kodu — açı, duraklar, başlangıç konumu — üretir.

linear-gradient: yönlü degradean

İşlev linear-gradient() bir açıyı ve ardından durakları alır: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). Açı 0deg yukarıyı gösterir, 90deg sağı, 180deg aşağıyı gösterir. Açı olmadan tarayıcı yukarıdan aşağıya ilerler. Başlıklar, eylem çağrısı düğmeleri ve bölüm şeritleri için en çok kullanılan sözdizimidir.

radial-gradient: hale ve elips

İşlev radial-gradient() bir noktadan (varsayılan olarak merkezden) başlar ve daire veya elipse olarak yayılır. Başlangıç konumu at X% Y% şeklinde yazılır: radial-gradient(circle at 50% 50%, …). Bir başlığın arkasında hale efekti, merkeze odaklanan bir kahraman arka planı veya sentetik yumuşak gölge için mükemmeldir. Araç, başlangıç noktasını piksel hassasiyetinde konumlandırmak için X ve Y kaydırıcıları sunar.

conic-gradient: bir nokta etrafında dönen

İşlev conic-gradient() saatin akrebi gibi bir noktanın etrafında döner. conic-gradient(from 90deg at 50% 50%, …) şeklinde yazılır; halkalar, dairesel göstergeler, renkli kenarlıklar veya prizma efektleri oluşturmanızı sağlar. Her durak bir açısal sektör kaplar: birden fazla renk koyarak tek bir görsel olmadan pasta grafiği çizersiniz.

Renk durakları (color stops)

Her durak bir rengi ve yüzde konumunu eşleştirir: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. İki renkteki aynı konumlar net bir geçiş (sert kenar) oluşturur; birbirinden uzak konumlar kademeli bir soldurma üretir. İki duraktan fazlası çok renkli paletler, bantlar veya malzeme simülasyonları (metal, sedef, kuzey ışığı) sağlar.

Degradean katmanlamak ve yedek hazırlamak

Kısayolda background sıra önemlidir: önce ön plan. Bir fotoğraf üzerine koyu bir örtü şöyle yazılır: background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Her zaman bir düz renk yedek olarak (background-color) çok eski tarayıcılar veya görsel yüklenirken kullanın.

Performans en iyi uygulamaları

CSS degradeanı her yeniden boyutlandırmada yeniden hesaplanır: durak sayısında makul kalın (%90 durumda 2–5 yeterlidir) ve mobilde çok büyük yüzeylerde çoklu katmanlamalardan kaçının. Tercih edin onaltılık veya HSL sabit değerler; tasarım onaylandığı anda açıyı dondurun, tarayıcılar arası mikro farklardan kaçının.

Volade paletiyle degradeanlar

Degradeanları oluşturmadan önce tutarlı bir palet için palet üreticisini ve renk seçicisini kullanın: marka tonlarını bulun, ardından buraya durak olarak yapıştırın. Sonuç doğrudan CSS'inize, tasarım sisteminize veya temanıza kopyalanır — masaüstünde ve mobilde, hesap vermeden, veri göndermeden.

Tek lisans, tüm premium ekosistem Tarayıcı · CMS · Masaüstü · Mobil · Scriptler · API · Araçlar · Database
Tek lisans, her şey Premium'a geç Giriş yap