Görsel olarak CSS gradient oluşturun
Gradientler (renk geçişleri), tek bir görsel dosyasına ihtiyaç duymadan butonlara, hero alanlarına, kartlara ve arka planlara derinlik ve renk katar. Ancak bunları elle yazmak, açıları ve yüzdeleri tahmin edip sayfayı defalarca yenilemek anlamına gelir. Bu CSS gradient oluşturucu, canlı önizleme ile gradienti görsel olarak tasarlamanızı sağlar ve tüm modern tarayıcılarda çalışan, kopyalamaya hazır, temiz bir CSS kodu verir.
Özellikler
- Üç gradient türü: linear, radial (daire veya elips) ve conic.
- Sürüklenebilir konumlara sahip sekize kadar renk noktası.
- Linear ve conic gradientler için açı kaydırıcı.
- Hızlı ilham için hazır şablonlar ve rastgele butonu.
- CSS koduna dahil edilmiş düz yedek (fallback) renk.
- Tek tıkla kodu kopyalama.
CSS'i Kullanma
Kodu, stil vermek istediğiniz öğenin CSS kuralına yapıştırın:
.hero {
background: #0ea5e9;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}
Gradientler CSS'te görsel olarak kabul edilir, bu nedenle onları background-image içinde kullanabilir, virgülle ayırarak birden fazla gradienti üst üste katmanlayabilir veya bir fotoğrafla birleştirebilirsiniz: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); kodu bir resmi koyulaştırır, böylece üzerindeki beyaz metin okunabilir kalır.
Tasarım ipuçları
- Sade tutun. Birbirine yakın iki renk tonu (maviden mora, turuncudan pembeye), zıt renklere kıyasla daha yumuşak ve modern görünür.
- Kontrastı kontrol edin. Metin gradyan üzerindeyse, her iki uçta da okunabildiğinden emin olun — kontrast oranlarını gösteren Renk Dönüştürücü ile renkleri test edin.
- Resimden Renk Seçici ile bir marka görselinden renkleri alın.
- Kutu Gölge Oluşturucu ile kartlara ve butonlara derinlik katın.