Gradient Oluşturucu

CSS gradient nedir?

CSS gradient, iki veya daha fazla renk arasında yumuşak geçiş oluşturan bir CSS tekniğidir. Ayrı bir görsel dosyaya gerek duymadan tarayıcı tarafından hesaplanır ve web performansını olumsuz etkilemez. Arka plan, buton, banner ve kart tasarımlarında yaygın olarak kullanılır.

Linear ve radial gradient farkı

Linear gradient renk geçişini düz bir yönde ilerletir; açı, yön ve renk duraklarıyla özelleştirilebilir. Radial gradient ise rengi bir merkez noktasından dairesel biçimde yayar. Bu araçla her iki türü de tek tıkla oluşturabilirsiniz.

CSS kodu nasıl kullanılır?

Araçtan kopyaladığınız kodu CSS dosyanızdaki bir öğenin background özelliğine yapıştırmanız yeterlidir. Örneğin .hero { background: linear-gradient(135deg, #6366f1, #ec4899); } şeklinde kullanabilirsiniz.

Sık Sorulan Sorular

CSS gradient nedir?

CSS gradient, iki veya daha fazla renk arasında yumuşak geçiş oluşturan bir CSS özelliğidir. Ayrı bir görsel dosyaya ihtiyaç duymadan tarayıcı tarafından render edilir. Web sitelerinde arka plan, buton ve banner tasarımında yaygın olarak kullanılır.

Linear ve radial gradient arasındaki fark nedir?

Linear gradient, renk geçişini düz bir yönde (sağ, aşağı, çapraz vb.) ilerletir; background: linear-gradient(90deg, #renk1, #renk2) söz dizimiyle kullanılır. Radial gradient ise rengi bir merkez noktasından dışa doğru dairesel biçimde yayar; background: radial-gradient(circle, #renk1, #renk2) ile tanımlanır.

Gradient açısı nasıl çalışır?

CSS linear-gradient açısı saatin tersi yönde ölçülür ve yukarıdan başlar: 0° yukarıya, 90° sağa, 180° aşağıya, 270° sola karşılık gelir. Bu aracın yön butonları en sık kullanılan 8 yönü hazır sunar; özel açı kutusundan istediğiniz değeri de girebilirsiniz.

Oluşturduğum gradient kodunu CSS'e nasıl uygularım?

CSS Kopyala butonuyla kopyaladığınız kodu CSS dosyanızdaki bir seçicinin içine background özelliği olarak yapıştırmanız yeterlidir. Örneğin: .hero { background: linear-gradient(135deg, #6366f1, #ec4899); }. Tüm modern tarayıcılar bu sözdizimini destekler.

Gradient'e ikiden fazla renk ekleyebilir miyim?

Evet, CSS gradientler birden fazla renk durağını (color stop) destekler. Bu araçla 2 renk arasında hızlı gradient oluşturabilirsiniz. Daha fazla renk durakları için CSS'e ek renkler ekleyebilirsiniz: linear-gradient(90deg, #renk1, #renk2, #renk3). Her renk isteğe bağlı yüzde konumuyla yerleştirilebilir.