Sınırsız durak, OKLCH uyumlu interpolasyon ve Tailwind v4 utility çıktısı ile linear, radial ve conic gradient'ler oluşturun. Canlı önizleme, 30+ hazır ayar, tarayıcınızda.
Linear, seçilen bir açıda düz bir çizgi boyunca harmanlama yapar (0° = yukarı, 90° = sağa). Radial, bir merkez noktadan dışa doğru harmanlar — çember veya elips, farthest-corner gibi boyut anahtar sözcükleriyle. Conic, bir merkez nokta etrafında döner — renk durakları saat ibreleri gibi açılarda yer alır. Conic; pasta grafikleri, kadran göstergeleri ve sentetik color-wheel arka planları için harikadır.
Benzer olmayan tonlar arasında geçiş yaparken — örneğin mavi → sarı veya kırmızı → yeşil. Varsayılan sRGB interpolasyonu bulanık bir gri orta noktadan geçer; OKLCH (CSS Color Module 4 in oklch), algısal olarak tek tip bir uzayda interpolasyon yaptığı için orta noktayı canlı tutar. Benzer tonlar arasındaki iki duraklı gradient'lerde fark küçüktür. Çok duraklı veya geniş ton aralıklı gradient'lerde OKLCH belirgin biçimde daha iyidir.
Linear / radial / conic, OKLCH ile yumuşak, Tailwind uyumlu — ve kullanmayı gerçekten keyifli kılan birkaç küçük dokunuş.
0-360° açıyla linear, çember/elips + boyut + konum ile radial, başlangıç açısı + konumla conic. Hepsi standartlara uyumlu CSS Images Module Level 4 söz dizimi üretir.
Herhangi bir yüzdeye durak ekleyin, konumu hassas ayarlamak için kaydırıcıyı sürükleyin, renk seçmek veya bir HEX yapıştırmak için renk örneğine tıklayın. Duraklar çıktıda otomatik sıralanır. Kaldırmak için × üzerine tıklayın (en az 2 durak).
Varsayılan sRGB ile modern in oklch interpolasyonu arasında geçiş yapın. OKLCH, algısal olarak daha yumuşak orta noktalar verir — ton sıçramalarında bulanık gri bantlar oluşmaz. CSS Color 4'ü henüz desteklemeyen tarayıcılarda nazikçe geriye dönüş yapar.
Üç çıktı paneli canlı güncellenir: ham CSS (background-image: linear-gradient(...)), Tailwind v4 keyfi-değer utility'si (bg-[linear-gradient(...)]) ve Style Dictionary veya Figma Tokens için hazır bir JSON design-token parçası.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — yüklemek ve ince ayar yapmak için tıklayın. Her hazır ayar yalnızca bir isim değil, gerçek üretim kalitesinde bir başlangıç noktasıdır.
Önizleme yerel background-image ile render edilir; bu yüzden gördüğünüz tam olarak stylesheet'inizin üreteceği şeydir. Her piksel yerel olarak çalışır — DevTools → Network açın ve sıfır dış istek olduğunu doğrulayın.
Boş sayfadan üretime hazır CSS, Tailwind veya JSON'a dört adım.
Arka planlar, başlıklar, hero bölümleri için linear. Spot ışıkları, vinyetler, parlak butonlar için radial. Pasta grafikleri, renk çarkları ve trend olan sentetik arka planlar için conic. Sekmelerle aralarında geçiş yapın — renk duraklarınız geçişte korunur.
Bir seçici açmak için renk örneğine tıklayın veya HEX'i doğrudan alana yapıştırın. Durak konumunu 0-100% arasında ayarlamak için kaydırıcıyı sürükleyin. En geniş boşluğa yeni bir durak eklemek için + Durak ekle'ye tıklayın (orta nokta rengiyle). Toplamda 12'ye kadar durak.
Linear için açıyı ayarlayın (0° yukarı, 90° sağa). Radial için şekil, boyut anahtar sözcüğü ve merkez konumu seçin. Conic için başlangıç açısını ayarlayın. Çok tonlu gradient'lerde algısal olarak yumuşak orta noktalar için Renk interpolasyonu'nu OKLCH'ye geçirin.
Üç panel canlı güncellenir: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (design-token şeklinde). Her birindeki kopyalama simgesini kullanın veya bir projeye bırakmaya hazır gradient.css dosyasını kaydetmek için CSS indir'e basın.
Gizlilik öncelikli bir tarayıcı aracının Figma + ayrı bir gradient sitesi açmaya tercih edildiği dört yaygın senaryo.
Markanıza yakın bir hazır ayar seçin, iki marka renginizi duraklara bırakın, temiz bir orta nokta için OKLCH interpolasyonuna geçin. CSS'i kopyalayın, hero'nuzun stylesheet'ine yapıştırın. Toplam süre: 2 dakikanın altında.
3 duraklı bir marka gradient'ini bir kez oluşturun, JSON design token olarak kopyalayın, Style Dictionary / Figma Tokens'a bırakın. Artık her platformdaki her buton + kart aynı gradient'i referansla kullanır. Tek bir yerde güncelleyin, her yere yansır.
Sentetik conic gradient'ler; pasta grafik görselleri, ilerleme kadranları veya 'veri yükleniyor' shimmer durumları için mükemmeldir. Conic türünü seçin, başlangıç açısını ayarlayın, durakları doğru yüzdelere bırakın — matematik 0-360° açıları yüzde konumlara tam olarak eşler.
Gradient'i oluşturun, en-boy oranını hedefinize göre ayarlayın (slaytlar için 16:9, IG için 1:1, X başlığı için 3:1), önizlemenin ekran görüntüsünü alın. Veya CSS'i tek seferlik bir HTML dosyasına kopyalayın ve ihtiyacınız olan tam piksel boyutunda tarayıcınızda ekran görüntüsü alın.
Renkleriniz ve gradient'leriniz cihazınızdan asla ayrılmaz. DevTools → Network açın ve herhangi bir işlem sırasında sıfır dış istek göreceksiniz.
background-image kullanır — böylece render edilen gradient, kullanıcılarınızın tarayıcılarında stylesheet'inizin üreteceğiyle birebir eşleşir.
CSS gradient'leri, OKLCH interpolasyonu ve design-token sistemleri üzerine özenle seçilmiş okumalar.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linear, seçilen bir açıda düz bir çizgi boyunca harmanlama yapar (0° = yukarı, 90° = sağa). Radial, bir merkez noktadan dışa doğru harmanlar — çember veya elips, farthest-corner gibi boyut anahtar sözcükleriyle. Conic, bir merkez nokta etrafında döner — renk durakları saat ibreleri gibi açılarda yer alır. Conic; pasta grafikleri, kadran göstergeleri ve sentetik color-wheel arka planları için harikadır.
Benzer olmayan tonlar arasında geçiş yaparken — örneğin mavi → sarı veya kırmızı → yeşil. Varsayılan sRGB interpolasyonu bulanık bir gri orta noktadan geçer; OKLCH (CSS Color Module 4 in oklch), algısal olarak tek tip bir uzayda interpolasyon yaptığı için orta noktayı canlı tutar. Benzer tonlar arasındaki iki duraklı gradient'lerde fark küçüktür. Çok duraklı veya geniş ton aralıklı gradient'lerde OKLCH belirgin biçimde daha iyidir.
Doğrudan JSX / Blade / HTML'e yapıştırabileceğiniz keyfi-değer bir utility: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. tailwind.config.js değişikliği gerekmez; herhangi bir Tailwind 4 projesinde çalışır. Adlandırılmış renk token'larını tercih ederseniz, CSS'i kopyalayın ve elle dönüştürün.
Linear ve radial gradient'ler 2014'ten beri evrensel olarak destekleniyor. Conic gradient'ler 2021'e kadar tüm sürekli güncellenen tarayıcılarda yayınlandı. in oklch interpolasyon anahtar sözcüğü Chrome 111+, Safari 16.2+, Firefox 113+'da desteklenir. Eski tarayıcıları desteklemeniz gerekiyorsa varsayılan sRGB interpolasyonunu kullanın — görsel fark en çok ton sıçramalı çok duraklı gradient'lerde önemlidir.
Hayır. Gradient string oluşturma, CSS / Tailwind / JSON serileştirme ve canlı önizleme tamamen cihazınızda JavaScript olarak çalışır. DevTools → Network açın; herhangi bir işlem sırasında sıfır dış istek göreceksiniz. Marka renklerini, dahili token'ları yapıştırın — hiçbir şey laptop'unuzdan çıkmaz.