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

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.

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.

Kurgusal telefon numarası oluşturucu

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

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur