Skip to content
Zoyku

CSS Degrade Oluşturucu

İki ile beş rengi doğrusal, radyal veya konik CSS degradelerine dönüştürün: canlı önizleme, yapıştırmaya hazır kod ve tek tıkla uyumlu paletler.

Color stops

Palettes

Angle: 135°
Live preview
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

Bu araç tamamen tarayıcında çalışır. Verilerin asla cihazından çıkmaz — hiçbir sunucuya yüklenmez.

Nasıl kullanılır

  1. 1İki ile beş renk belirleyin ya da hazır bir paletle başlayın.
  2. 2Degrade türünü seçin, ardından açı veya şekli ayarlayın; gerekirse konumları sabitleyin.
  3. 3CSS bloğunu kopyalayıp stil dosyanıza yapıştırın.

CSS Degrade Oluşturucu

İki ile beş renk seçin, doğrusal, radyal ya da konik türünü belirleyin ve açıyı sürükleyin — önizleme yazarken güncellenir, CSS her zaman bir kopya uzağınızdadır. Bir durağın konumunu boş bırakırsanız CSS'in yapacağı gibi otomatik yerleşir; kesin yüzdeler vererek sert geçişler ve merkezden kaymış karışımlar elde edersiniz.

Çıktı gerçek bir üretim bloğudur: eski tarayıcılar için düz renk yedeği satırı, eski WebKit sürümleri için -webkit- önekli satır ve en son standart sözdizimi. Rastgele uyumlama düğmesi paletinizin renk tonlarını HSL uzayında döndürür; böylece her karıştırma dengeli kalır, birbirine girmeye çalışmaz.

Sık sorulan sorular

CSS'te neden -webkit- önekli bir satır var?

Bu, yalnızca -webkit-linear-gradient anlayan eski WebKit tarayıcıları (kabaca Safari 5-6 dönemi) için bir uyumluluk satırıdır. Son on yılın tüm tarayıcıları standart satırı okur; bu sürümleri desteklemeniz gerekmiyorsa önekli satırı silebilirsiniz — tutmak bir satır, silmek sıfır maliyettir.

Doğrusal degrade dediğimizdeki açı ne anlama geliyor?

Degenenin ilerleme yönüdür ve yukarıyı sıfır alarak saat yönünde ölçülür: 0deg aşağıdan yukarıya, 90deg soldan sağa, 180deg yukarıdan aşağıya gider. Araç girdiğiniz her açıyı normalleştirir (−45, 315 olur) ve eski sözdiziminin ters yön kuralı -webkit- satırında sizin için çözülmüştür.

İlgili araçlar

Tüm Yardımcı Araçlar araçları →

Kontrast Denetleyici

İki renk arasındaki WCAG kontrast oranını normal ve büyük metin için AA ve AAA sonuçlarıyla hesaplayın, canlı önizlemeyle gözünüzle doğrulayın. Tamamen tarayıcınızda çalışır.

Tüm araçlar →

Renk Dönüştürücü

Bir rengi hex, rgb() veya hsl() olarak yapıştır; üç biçimi de artı tasarım sistemine hazır bir tente-gölge satırı al.

Tüm araçlar →

Renk Seçici

Renk paletinden seç ya da EyeDropper API ile doğrudan ekranından al — hex, RGB ve HSL tek tıkla kopyalanır.

Tüm araçlar →

Görsel Çerçeve

Tek bir görsele ya da bütün bir yığına düz renkli veya saydam kenarlık ekleyin — canlı önizleme, PNG veya JPG çıktı, tamamen tarayıcınızda çalışır.

Tüm araçlar →

Bu aracı gömün

Tek satırla bu aracı sitenize ekleyin — ziyaretçinin tarayıcısında çalışır.

<iframe src="https://zoyku.com/tr/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% local processing