CSS Gradient Oluşturucu

CSS gradient oluşturucu, iki veya daha fazla renk arasında yumuşak geçişli arka planların (linear/radial gradient) kodunu görsel olarak üretmenizi sağlar. Renkleri, geçiş yönünü ve açıyı seçer, sonucu canlı önizler ve hazır CSS'i kopyalarsınız.

Doğrusal (belirli açıda düz çizgi) veya dairesel (merkezden dışa) geçiş seçebilir, istediğiniz kadar renk durağı ekleyebilirsiniz. Üretilen kodu bir öğenin background özelliğine yapıştırmanız yeterlidir.

Doğrusal gradyan renkleri bir eksen boyunca geçirir ve en yaygın kullanılanıdır; kahraman bölümleri, düğmeler ve arka planlar için uygundur. Radyal gradyan merkezden dışa doğru yayılır, bir ışık kaynağı veya odak noktası hissi yaratır. Konik gradyan ise renkleri bir daire etrafında döndürür; grafik ve renk çarkı benzeri görsellerde kullanılır.

Açı seçimi sanıldığından önemlidir. CSS'te sıfır derece yukarı doğrudur ve saat yönünde artar. 135 derece, sol üstten sağ alta inen ve doğal ışık yönüyle uyumlu olduğu için gözü rahatsız etmeyen yaygın bir tercihtir.

Birbirine zıt iki renk arasında gradyan kurduğunuzda ortada donuk gri bir bant belirebilir. Bunun sebebi tarayıcıların renkleri varsayılan olarak sRGB uzayında karıştırmasıdır; bu uzayda karşıt renklerin ortası doygunluğunu kaybeder.

Çözüm, aradaki geçişe bir ara renk eklemektir. Mavi ile turuncu arasında doğrudan geçiş yapmak yerine araya mor veya kırmızı bir durak koymak, geçişi canlı tutar. Bu, deneyerek bulunması gereken bir ayardır ve önizleme ile hemen görülür.

CSS gradyanı bir görsel değildir; tarayıcı tarafından çizilir. Bu, aynı görünümü bir arka plan resmiyle sağlamaya göre çok daha hafiftir — indirilecek dosya yoktur ve her ekran boyutunda keskin kalır.

Gradyan üzerine metin koyacaksanız kontrastı gradyanın her iki ucunda da kontrol edin. Açık uçta okunan bir yazı, koyu uçta kaybolabilir. Ürettiğiniz kodu doğrudan kopyalayabilirsiniz; hesaplama tarayıcınızda yapılır.