Softonic

CSS Gradyan Oluşturucu

Adım 1 / 3
Tür
Sonraki

Modern arayüz arka planları nadiren düz bir renk kullanır; hero bölümleri, butonlar ve kartlar neredeyse her zaman bir CSS gradyanı kullanır. Bu oluşturucu; doğrusal veya radyal gradyan seçmenize, istediğiniz kadar renk durağı eklemenize, açıyı (doğrusal için) veya şekli (radyal için) ayarlamanıza ve stil sayfanıza yapıştırmaya hazır, temiz bir background: linear-gradient(…) değerini kopyalamanıza olanak tanır.

CSS gradyanı nasıl oluştururuz?

  1. 1

    Gradyan türünü seçin

    Doğrusal (açıya göre yön) veya radyal (daire/elips).

  2. 2

    Açıyı veya şekli ayarlayın

    Doğrusal: 0–360°. Radyal: daire veya elips.

  3. 3

    Renk durakları ekleyin

    Her durak bir renk ve bir konumdan (0–100%) oluşur. İki duraklı gradyanlar temel seviyedir; üç veya daha fazla durak daha pürüzsüz geçişler sağlar.

  4. 4

    CSS'i kopyalayın

    Çıktı, herhangi bir CSS dosyasına yapıştırabileceğiniz tek bir `background` özellik değeridir.

Söz dizimi kopya kağıdı

/* Doğrusal */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Radyal (daire) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* Çok duraklı */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Gerçekten sezgiye uyan açılar

CSS gradyan açıları trigonometriden farklıdır: 0deg yukarıyı (kuzey), 90deg sağı (doğu), 180deg aşağıyı, 270deg solu gösterir.

Yön Açı
Üstten alta 180deg
Alttan üste 0deg
Soldan sağa 90deg
Sol üstten sağ alta 135deg

Çamurlu ara tonlardan kaçınma

Tamamlayıcı renkler arasındaki doğrusal gradyanlar (örneğin mavi → turuncu) yaklaşık %50 seviyesinde, karışımın “ölü” hissettiği gri bir banttan geçer. Bunu şöyle düzeltebilirsiniz:

  • İlgili bir tonda ara durak ekleyin (mavi → mor → turuncu).
  • Algısal olarak daha pürüzsüz karışımlar için OKLCH interpolasyonu (linear-gradient(in oklch, ...)) kullanın, 2024 itibarıyla tüm modern tarayıcılarda desteklenir.
  • Ara tonun daha sıcak bir aileye düşmesi için uçlardan birinin rengini hafifçe kaydırın.

Performans ipucu

Gradyanlar GPU tarafından çizilir ve genellikle düşük maliyetlidir. Yine de bir gradyanı canlandırmak (background-position numaraları, SVG bulanıklığı) çizim maliyetini artırabilir, yayına almadan önce orta sınıf bir telefonda test edin.

Sık Sorulan Sorular

CSS gradyanları açıyı üstten başlayarak saat yönünde ölçer; standart matematik ise sağdan başlayarak saat yönünün tersine ölçer. CSS’de 90deg sağı gösterir; trigonometride bu değer 0° olur.

Spesifikasyon herhangi bir sayıya izin verir. Pratikte 4–5’ten fazla durak genellikle gökkuşağı gibi görünür; iyi seçilmiş iki veya üç durak neredeyse her zaman daha temiz durur.

Evet, bunu rastgele bir değer olarak yapıştırın: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". Yeniden kullanılabilir gradyanlar için Tailwind yapılandırmanızda özel bir yardımcı sınıf tanımlayın.

Standart düzenleyici, önizlemeyi oluşturmak için gradyan ayarlarını sunucuya gönderir. Rehberli akışta tür, açı, şekil ve renk durakları sayfa URL’sinde de görünür. Hassas bilgi girmeyin; araç yeniden kullanılabilir bir gradyan projesi kaydetmez.

İlgili Araçlar

İkilik Tabandan ASCII'ye Dönüştürücü

İkilik veri yapıştırın (boşlukla ayrılmış baytlar veya uzun bir bit dizisi) ve temsil ettiği ASCII metni alın. 7 bit ve 8 bit kodlamaları destekler.

BBCode HTML Dönüştürücü

BBCode'u (forum işaretlemesi) temiz HTML'e dönüştürün. Biçimlendirme etiketleri, listeler, alıntılar, kod, görseller, linkler ve tabloları işler.

Binary'den Hex'e Dönüştürücü

Binary girdiyi sade büyük harfli hexadecimal değere dönüştürün. Binary olmayan karakterler yok sayılır ve baştaki sıfırlar korunmaz.

İkiliden Sekizliye Dönüştürücü

Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.

HEX Renk Seçici

HEX rengi seçin veya girin; RGB, HSL, yaklaşık CMYK, bağıl parlaklık ve beyaz-siyah kontrast oranlarını görün.

İkilik Sayıdan Onluk Sayıya

İkilik sayıları anında onluk sayıya dönüştürün. Her bitin nasıl katkı verdiğini görebilmeniz için konumsal açılımı gösterir.