CSS gradient nedir, ne işe yarar?
Gradient, iki ya da daha fazla rengin birbirine yumuşakça geçtiği bir arka plan türüdür. Eskiden bu tür geçişler için Photoshop'ta bir görsel hazırlamak, dilimlemek ve sayfaya resim olarak koymak gerekirdi. Bugün aynı etki tek satır CSS ile elde edilir: tarayıcı geçişi çizim anında hesaplar, dosya indirmek gerekmez, her ekran çözünürlüğünde net görünür ve renkleri değiştirmek bir kod satırını düzenlemek kadar kolaydır. Başlık bölümlerinden butonlara, kartlardan tam sayfa arka planlara kadar modern arayüzlerin büyük kısmında gradient kullanılır.
Bu araç, CSS'in üç gradient türünü, kutu gölgesini ve köşe yuvarlamayı görsel olarak ayarlamanızı sağlar. Yaptığınız her değişiklik önizleme kutusuna anında yansır ve alttaki kutuda kopyalamaya hazır, tarayıcı ön eki gerektirmeyen modern bir kod çıkar.
Nasıl kullanılır?
- "Gradient" sekmesinde türü seçin: doğrusal, radyal ya da konik. Doğrusal ve konik için açıyı, radyal ve konik için merkez konumunu ayarlayın.
- Renk duraklarını düzenleyin: renk kutusuna tıklayarak rengi seçin, yanındaki sayıyla durağın yüzde konumunu belirleyin. "Renk durağı ekle" ile en fazla sekiz renk kullanabilirsiniz.
- Fikir bulamazsanız yirmi hazır paletten birine tıklayın ya da "Rastgele gradient" düğmesiyle sürpriz bir geçiş alın.
- İsterseniz "Gölge" sekmesinde bir ya da birkaç gölge katmanı ekleyin, "Köşe yuvarlama" sekmesinde köşeleri tek tek ya da hep birlikte ayarlayın.
- Önizlemeden memnun kalınca "CSS'i kopyala" düğmesine basın. Resim gerekiyorsa boyutu seçip "PNG indir"e tıklayın.
Doğrusal, radyal ve konik gradient farkları
Doğrusal gradient renkleri düz bir çizgi boyunca yayar. Açı 0 derece olduğunda geçiş alttan üste, 90 derecede soldan sağa, 180 derecede yukarıdan aşağı gider; 135 derece gibi çapraz değerler çok yaygın bir görünüm verir. Radyal gradient bir merkez noktadan dışarı doğru yayılır; daire ya da elips biçiminde olabilir. Spot ışığı, parlama ve vurgu efektleri için idealdir. Konik gradient ise bir merkez etrafında saat yönünde döner; renk tekerleği, pasta grafiği ve metalik yüzey görünümleri için kullanılır. Konik gradient'te açı, dönüşün başlangıç noktasını belirler.
Renk duraklarının yüzde konumları geçişin nerede olacağını söyler. İki durağı aynı konuma koyarsanız yumuşak geçiş yerine sert bir çizgi elde edersiniz; bu, şerit ve bayrak benzeri desenler için kullanışlıdır. Çıktıdaki linear-gradient(90deg, #7b2331 0%, #ffffff 100%) gibi satır, doğrudan background özelliğine yazılır.
box-shadow: çoklu katman ve iç gölge
Gölge, bir öğeye derinlik katmanın en kolay yoludur. Her katman beş değerden oluşur: yatay kayma, dikey kayma, bulanıklık, yayılma ve renk. Gerçekçi gölgeler genellikle tek bir sert gölgeyle değil, üst üste binmiş iki ya da üç yumuşak gölgeyle elde edilir: biri küçük ve keskin, diğeri büyük ve çok saydam. Araç en fazla beş katmana izin verir ve katmanları CSS'in beklediği sırayla virgülle ayırarak yazar. "İç gölge" kutusu işaretlendiğinde gölge öğenin dışına değil içine düşer; bastırılmış düğme ve girinti görünümü için kullanılır. Gölge rengi için saf siyah yerine düşük saydamlıklı bir ton seçmek daha doğal görünür.
border-radius: köşeleri tek tek yuvarlamak
Köşe yuvarlama, kartları ve butonları yumuşatır. Dört köşeye aynı değeri vermek için tek sayı yeterlidir; farklı değerler için CSS sırayla sol üst, sağ üst, sağ alt ve sol alt köşeyi alır. Piksel yerine yüzde kullanırsanız kare bir öğede yüzde 50 tam daire verir. Hap biçimli bir buton için çok büyük bir piksel değeri (örneğin 999px) kullanmak yaygın bir yöntemdir; tarayıcı değeri otomatik olarak kutunun yarısına sabitler. Önizleme kutusu köşe değişimini hemen gösterir.
Tarayıcı ön eki gerekir mi?
Hayır. Eskiden -webkit-linear-gradient ve -moz-linear-gradient gibi ön ekler gerekiyordu. Bugün tüm güncel tarayıcılar standart sözdizimini destekler ve araç yalnızca bu modern biçimi üretir. Konik gradient de güncel Chrome, Edge, Firefox ve Safari sürümlerinde çalışır. Çok eski bir tarayıcıyı hedefliyorsanız gradient'in yanına düz bir yedek renk (background-color) yazmanız iyi bir önlemdir.
PNG olarak indirmek ne zaman işe yarar?
Bazı yerlerde CSS kullanamazsınız: sosyal medya kapağı, sunum arka planı, e-posta başlığı, telefon duvar kâğıdı ya da bir tasarım programına yerleştireceğiniz zemin gibi. "PNG indir" seçeneği, ayarladığınız gradient'i seçtiğiniz boyutta bir resim dosyasına çizer. Ortak boyutlar hazırdır: 1200 x 630 paylaşım görseli, 1920 x 1080 masaüstü, 1080 x 1920 hikaye gibi. Özel boyutla 4096 pikselin altında istediğiniz ölçüyü girebilirsiniz. Resim doğrudan tarayıcınızda canvas ile çizilir; hiçbir sunucuya gönderilmez. Çizim; doğrusal, radyal ve konik gradient'lerde CSS önizlemesine çok yakın sonuç verir.
Gradient kullanırken pratik ipuçları
Metin üzerine gradient koyarken kontrasta dikkat edin: açık renkten koyuya geçen bir zeminde yazı bir bölgede okunaksız kalabilir. Metnin okunacağı en açık ve en koyu noktada kontrast oranını kontrol edin. Birbirine çok uzak tonları (örneğin kırmızıdan yeşile) doğrudan geçirmek ortada çamurlu gri bir bant oluşturabilir; araya üçüncü bir renk eklemek bunu önler. Marka renginizi başlangıç durağı yapıp aynı rengin biraz açık ya da koyu tonunu ikinci durak seçmek, hem uyumlu hem sade bir sonuç verir. Büyük alanlarda gradient bantlaşması fark edilirse çok hafif bir gürültü katmanı ya da ek bir ara durak yardımcı olur.
Neden Bilişim Ajans aracı?
- Veri gönderilmez. Tüm hesap ve çizim tarayıcınızda yapılır; PNG de burada oluşturulur.
- Hepsi bir arada. Gradient, çoklu gölge, köşe yuvarlama, hazır palet, rastgele ve PNG indirme tek sayfada.
- Temiz, modern kod. Ön ek yok; doğrudan projenize yapıştırılır.
- Klavyeyle ve mobilde çalışır. Tüm denetimler klavyeyle erişilebilir, 360 piksel genişlikte de kullanılır.
- Gerçekten ücretsiz. Kayıt, sınır ve filigran yok.
Sık sorulan sorular
Oluşturduğum gradient bir yere gönderiliyor mu?
Hayır. Renkler, ayarlar ve PNG çizimi tamamen tarayıcınızda gerçekleşir. Sayfa yüklendikten sonra hiçbir ağ isteği yapılmaz ve internet bağlantısı kesilse bile araç çalışır.
CSS kodunu nereye yapıştırmalıyım?
Stil dosyanızdaki bir kuralın içine yapıştırın, örneğin .kart { ... } bloğuna. Çıktıdaki satırlar background, box-shadow ve border-radius özellikleridir; hepsi doğrudan kullanılabilir.
Neden en az iki renk durağı gerekiyor?
Gradient bir renkten diğerine geçiştir; tek renk geçiş oluşturmaz. Bu yüzden son iki durağı silmenize izin verilmez. Düz bir renk istiyorsanız iki durağa aynı rengi verebilirsiniz.
Gradient yönünü nasıl anlarım?
Doğrusal gradient'te 0 derece alttan üste, 90 derece soldan sağa, 180 derece yukarıdan aşağı, 270 derece sağdan sola gider. Açıyı değiştirdikçe önizlemede yönü anında görürsünüz.
PNG'de gölge ve köşe yuvarlama neden yok?
PNG, arka plan olarak kullanılacak düz bir gradient yüzeyi üretir; gölge ve köşe yuvarlama bir öğenin özellikleridir ve yüzeyin kendisinin parçası değildir. Bunlar yalnızca CSS çıktısında yer alır.
Konik gradient PNG hatası alıyorum, ne yapmalıyım?
Çok eski tarayıcıların canvas'ı konik gradient çizemeyebilir. Tarayıcınızı güncelleyin ya da doğrusal veya radyal gradient seçin. CSS çıktısı yine de modern tarayıcılarda çalışır.
Rastgele gradient'ler her seferinde güzel çıkıyor mu?
Rastgele renkler bazen uyumsuz olabilir; bu bir ilham aracıdır. Beğendiğiniz bir sonuç çıkana kadar tekrar basın, ardından renk durağı kutularından ince ayar yapın ya da hazır paletlerden birini seçin.
Kod gelecekte çalışmaz hâle gelir mi?
Üretilen sözdizimi CSS standardının parçasıdır ve tüm güncel tarayıcılarda desteklenir. Ön ek içermediği için eskiyen bir parça taşımaz.
İlgili araçlar
Markanıza özel web tasarımı ve arayüz çalışmaları için Bilişim Ajans ekibiyle iletişime geçebilirsiniz.