CSS Gradient Oluşturma

İki rengi ve açıyı seçip canlı önizlemeli CSS gradient kodunu oluşturun.

Ücretsiz
Kayıt yok
Dosyalar tarayıcıda işlenir

Geçiş türü

Doğrusal yönlüdür, dairesel merkezden yayılır.

Açı (derece)

Yalnız doğrusal türde kullanılır, 0 ile 360 arası.

Birinci renk

Geçişin başlangıç rengi.

İkinci renk

Geçişin bitiş rengi.

Sonuç burada görünecek

Girdi: HEX
Çıktı: CSS
Fiyat: Ücretsiz
Kayıt: gerekmez, dosyalar tarayıcıda işlenir

Nasıl kullanılır?

Birinci ve ikinci rengi renk seçiciden belirleyin.
Tür olarak doğrusal, dairesel ya da konik seçip açıyı yazın.
Oluştur düğmesine basın, önizlemeyi görüp CSS kodunu kopyalayın.

CSS gradient kodu üretirken bilmeniz gerekenler

Tür seçimi: doğrusal, dairesel ve konik

Doğrusal geçiş renkleri tek çizgi boyunca dizer; 90 derece soldan sağa akış verir, 180 derece yukarıdan aşağıya çevirir. Hero şeritleri ve buton zeminleri çoğunlukla bu türle kurulur, çünkü metinle birlikte okunması kolaydır. Açı kaydırıcısı 0 ile 360 arasında çalışır, her değer anında önizlemeye yansır.

Dairesel geçiş merkezden dışa doğru yayılır, daire biçimi kart ve rozet zeminlerinde dengeli durur. Konik geçiş renkleri merkez çevresinde döndürür, pasta dilimi ve kadran desenleri bu türle yapılır. Doğrusal ve dairesel yazım 2011 yılından beri tüm modern tarayıcılarda önek gerektirmez, konik yazım 2020 yılından beri yaygın desteklenir.

Açı ve renk durağı düzeni

Bu araç iki durakla çalışır; birinci durak yüzde 0 konumunda, ikinci durak yüzde 100 konumundadır. Ara ton istenirse iki uç renk birbirine yakın seçilir, sert sınır istenirse duraklar aynı noktada buluşturulur. Yüzde konumu metin kutusuna değil renk seçiminin ardından gelen düzene göre sabitlenir, v1 kapsamı iki renk üzerinedir.

Açı yalnız doğrusal türde anlam taşır; dairesel ve konik türde açı alanı yok sayılır. 45 derece çapraz akış düğmelerde hareket hissi verir, 135 derece ters çapraz afişlerde derinlik kurar. Önizleme kutusu 16 birimlik yükseklikte sabit tutulur, böylece açı değişiminin zemindeki karşılığı büyümeden görülür.

Yedek renk ve yapıştırma notu

Üretilen kod iki satırdır; ilk satır düz yedek renktir, ikinci satır geçiş bildirimidir. Eski sürüm geçişi anlamazsa yedek renk zemini kurtarır, sayfa boş görünmez. Stil dosyasına iki satırı birlikte yapıştırın, yalnız ikinci satırı almak yedek davranışını kaybettirir.

Bildirim background-image özelliğiyle yazılır, background kısayolunun üzerine ezilmemesi için seçicideki sıra korunmalıdır. Tailwind projesinde keyfi değer alanına ikinci satırdaki fonksiyon bölümü kopyalanır. Satır sonundaki noktalı virgül silinirse derleyici hata verir, kopyalama sonrası imleçle kontrol edin.

Ne zaman kullanılır?

Lansman sayfasının üst şeridi, kampanya butonu ve bülten kartı düz renkten sıkıcı göründüğünde bu üretici kullanılır. Tasarımcı iki marka rengini verir, geliştirici açıyı 90 derecede tutup kodu stil dosyasına taşır. Toplantıda karar değişirse renk seçicide yeni değer denenir, sayfa yenilenmeden önizleme güncellenir.

Metin geçiş zemini üzerinde yer alacaksa koyu uç alta, açık uç üste konur ve paragraf gölgesiz okunur. Açık zeminli logolarda geçiş kartın arkasında kalır, logo dosyasına işlenmez. Tek seferde bir geçiş üretilir, sayfadaki her bölüm için renk çifti ayrı ayrı hazırlanır.

Sık sorulan sorular

Gradient oluşturma ücretsiz mi?

Evet, iki renkli gradient üretimi ücretsizdir ve kayıt istemez. Renkleri seçip dilediğiniz kadar önizleme üretebilirsiniz. Sayfa yenilense bile araç aynı şekilde çalışır; kota veya ödeme ekranı çıkmaz.

Seçtiğim renkler sunucuya gönderilir mi?

Hayır, seçtiğiniz renkler ve açı yalnızca tarayıcınızda işlenir, sunucuya gönderilmez. Marka paleti gibi gizli çalışmalarda işiniz bitince alanları temizleyin. Sonuç ekranda görünür, kayda alınmaz.

Açı değeri hangi türde işe yarar?

Açı yalnız doğrusal geçişte yönü belirler; 90 derece yatay, 180 derece dikey akış verir. Dairesel ve konik türde açı alanı yok sayılır, önizleme merkezden yayılır. Yanlış türde açı deniyorsanız önce tür seçimini doğrusal konuma getirin.

Konik geçiş eski sürümlerde açılır mı?

Güncel Chrome, Firefox, Safari ve Edge konik yazımı destekler, 2020 öncesi sürümlerde zemin yedek renge düşer. Kritik sayfalarda konik yerine doğrusal kullanın. Yedek renk satırını silmeyin, eski sürümde sayfa boş kalmaz.

Üç ve daha çok renk eklenir mi?

Hayır, v1 kapsamı iki durakla sınırlıdır ve üçüncü renk alanı bulunmaz. Çok duraklı desen gerekiyorsa iki ayrı geçiş üretip katmanlı arka plan olarak üst üste yazın. Liste halinde renk dizmek için renk seçici araçları ayrıca kullanın.