Nasıl kullanılır
- Tür bölümünde Doğrusal, Radyal veya Konik seçin.
- Renk durakları bölümüne kullanacağınız hex renk kodlarını girin.
- Yeni bir renk için + Renk durağı ekle düğmesine basın.
- Doğrusal veya Konik seçtiyseniz Açı alanına 0–360 arasında bir tam sayı girin.
- Radyal seçtiyseniz Şekil bölümünde Daire veya Elips seçin.
Örnekler
Ürün fotoğrafı için şeffaf geçiş
Girdi
Doğrusal, 0° · #000000 %0, opaklık %80 · #000000 %100, opaklık %0
Çıktı
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
Butik sitesi için köşeden yayılan arka plan
Girdi
Radyal, Elips, sol üst · #FCE7F3 %0 · #DB2777 %100
Çıktı
background: radial-gradient(ellipse at top left, #FCE7F3 0%, #DB2777 100%);
İki renkli dairesel rozet
Girdi
Konik, 0°, orta · #E30A17 %0 · #E30A17 %50 · #FFFFFF %50 · #FFFFFF %100
Çıktı
background: conic-gradient(from 0deg at center, #E30A17 0%, #E30A17 50%, #FFFFFF 50%, #FFFFFF 100%);
İpuçları
- Tam renkleri seçin ve kontrastı HTML Renk Kodları ile kontrol edin.
- Gradyanı HTML Editör ile bir sayfada deneyin.
Sık sorulan sorular
Tekrarlı seçeneği neden görünümü değiştirmiyor?
Son renk durağı %100 konumundaysa Tekrarlı seçeneğinin görünür bir etkisi olmaz. Son durağı daha düşük bir konuma, örneğin %25'e taşıyın.
Hatalı değer girince CSS neden değişmiyor?
Geçersiz alan kırmızıyla işaretlenir ve altında hata mesajı gösterilir. CSS ve önizleme, değeri düzeltene kadar son geçerli gradient'i korur.
Hazırladığım gradient sonraki ziyaretimde kalır mı?
Son geçerli ayarlar tarayıcınızın localStorage alanına kaydedilir ve sonraki ziyaretinizde geri yüklenir. Sıfırla düğmesi bu kaydı siler ve varsayılan ayarlara döner.
CSS kodunu sayfamda nasıl kullanırım?
CSS'i kopyala düğmesiyle aldığınız background: …; bildirimini ilgili CSS kuralına ekleyin. Değeri kopyala düğmesi yalnızca gradient değerini kopyalar; background: kısmını ve son noktalı virgülü içermez.