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

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

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.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

EditorConfig Oluşturucu

Girinti, satır sonu ve karakter kümesi kurallarınızdan bir .editorconfig oluşturun, ardından deponuzdaki her dil için doğru bölümü ekleyin: Python, Go, YAML, Makefile ve daha fazlası.

Araç diğer dillerde mevcuttur