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

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Webpack Yapılandırma Oluşturucu

Saf JavaScript, React veya Vue için webpack 5 uyumlu bir webpack.config.js oluşturun: TypeScript, Babel, CSS veya Sass, görseller, HtmlWebpackPlugin, geliştirme sunucusu ve npm install satırı.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Tamamlayıcı Renk Bulucusu

Her girdi için tamamlayıcı renk belirleyin. HSL açısından tersi renk, bölünmüş tamamlayıcı çifti ve erişilebilir kombinasyonlar için öneriler geri verir.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Araç diğer dillerde mevcuttur