Softonic

CSS Gradyan Oluşturucu

Adım 1 / 2
Sonraki

Bir gradyan, butonlara, kartlara, hero bölümlerine ve rozetlere hiçbir görsel dosyası olmadan şık bir görünüm kazandırabilir. Bu oluşturucu CSS işini sizin için yazar: doğrusal veya radyal bir gradyan seçin, iki renk belirleyin, gerekiyorsa açıyı ayarlayın ve elde edilen background bildirimini doğrudan stil sayfanıza kopyalayın.

Gradyan nasıl oluşturulur

  1. 1

    Gradyan türünü seçin

    Bir açı boyunca düz geçiş için doğrusal, renkleri bir merkez noktasından dışa doğru yaymak için radyal.

  2. 2

    İki renk seçin

    İki renk alanına istediğiniz hex renklerini girin (örneğin #2563eb ve #16a34a).

  3. 3

    Açıyı ayarlayın (yalnızca doğrusal)

    Derece cinsinden açı: 0deg yukarıyı, 90deg sağı, 180deg aşağıyı gösterir. Radyal gradyanlar açıyı yok sayar.

  4. 4

    CSS oluşturun

    Araç, değerlerinizle `background:` bildirimini oluşturur.

  5. 5

    Kodu kopyalayın

    Tek satırlık bildirimi kopyalayın ve stil sayfanızda biçimlendirmek istediğiniz öğenin kuralının içine yapıştırın.

Doğrusal gradyanlar

background: linear-gradient(135deg, #2563eb, #16a34a);

Açı, üstten başlayarak saat yönünde ilerler: 0deg = yukarı, 90deg = sağ, 180deg = aşağı, 270deg = sol. Adlandırılmış yönleri elle de yazabilirsiniz: to right 90deg, to bottom left ise 135deg anlamına gelir.

Radyal gradyanlar

background: radial-gradient(circle, #2563eb, #16a34a);

Renkler, öğenin merkezinden dışa doğru yayılır. Radyal gradyanlar açı kullanmaz; daha fazla kontrole ihtiyaç duyduğunuzda konum veya boyut anahtar kelimelerini elle ekleyin (at 30% 40%, ellipse).

Renk durakları

CSS gradyanları ikiden fazla renk kabul eder ve her durağın bir konumu olabilir:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Aynı konumdaki iki durak sert bir geçiş oluşturur: renk karışmak yerine anında değişir. Bölünmüş arka planlar için kullanışlıdır.

İpuçları

  • Kırmızıdan maviye bir gradyan, varsayılan sRGB enterpolasyonunda griye kaçan bir orta noktadan geçer. oklch ile enterpolasyon karışımı renkli tutar: linear-gradient(in oklch, red, blue), modern tarayıcılar tarafından desteklenir.
  • transparent renksiz değildir: sRGB içinde rgba(0,0,0,0) karşılığındadır, yani şeffafa geçiş koyu griden geçer. Bunun yerine rgba(color, 0) kullanın.
  • Gradyanlar modern tarayıcılarda GPU üzerinde işlenir, bu yüzden her boyutta neredeyse hiç maliyetleri yoktur. Gradyanlar arasında animasyon desteklenmez ve aniden değişir; bunun yerine ek bir katmanın opaklığını canlandırın.
  • Metin dolgusu: bildirimi background-clip: text; color: transparent; ile birleştirerek metni gradyanla doldurabilirsiniz. Kenarlıklar için border-image: linear-gradient(...) 1; modern tarayıcılarda çalışır.

Sık Sorulan Sorular

Yukarıdan aşağıya ya da köşeden köşeye akan bir buton veya hero gibi yönlü geçişler için doğrusal. Renklerin bir merkez noktasından dışa yayıldığı spot ışığı ve parlama efektleri için radyal.

Açı, doğrusal gradyanlarda geçişin yönünü belirler: 0deg yukarıyı, 90deg sağı gösterir ve bu şekilde saat yönünde ilerler. Radyal gradyanlar açıyı yok sayar.

Varsayılan sRGB enterpolasyonu renk bileşenlerinin ortalamasını alır ve doygunluğu düşük bir orta nokta oluşturur. Bunun yerine oklch ile enterpolasyon yapın (linear-gradient(in oklch, red, blue)), böylece karışım ortada da renkli kalır.

CSS, iki background-image değeri arasında enterpolasyon yapamaz, geçiş aniden olur. Yaygın çözümler: üste bindirilen bir gradyanın opaklığını canlandırmak ya da daha büyük sabit bir gradyan üzerinde background-position değerini kaydırmak.

İ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.

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.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayı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.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur