Preview

Oluşturulan CSS

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Degrade Kontrolleri

135°
0%
100%

Popüler Ön Ayarlar

Gradyan Örnekleri

Bu çarpıcı gradyan örneklerini keşfedin ve bir sonraki projeniz için ilham alın. Jeneratöre yüklemek için herhangi bir gradyana tıklayın.

Gün Batımı Allık

Güzel gün batımlarından ilham alan sıcak bir gradyan.

Okyanus Esintisi

Kıyı suları hissini uyandıran sakin bir gradyan.

Nane Füzyonu

Nane ve gök mavisini birleştiren taze ve modern bir gradyan.

Yemyeşil Bahçe

Doğanın güzelliğini temsil eden canlı bir gradyan.

Kozmik Rüya

Gece gökyüzünden ilham alan büyülü bir gradyan.

Altın Saat

Alacakaranlığın özünü yakalayan sıcak bir gradyan.

Gradyan Belgeleri

CSS Degradeleri nedir?

CSS gradyanları, iki veya daha fazla renk arasında yumuşak geçişler görüntülemenizi sağlar. Öğeler için arka plan olarak kullanılabilirler ve üç farklı türde olabilirler:

  • Doğrusal Gradyanlar:Renkleri düz bir çizgi boyunca geçirin.
  • Radyal Gradyanlar:Renkleri bir merkez noktasından dışa doğru geçirin.
  • Konik Gradyanlar:Renkleri daire içindeki bir merkez noktası etrafında geçirin.

Degradeler Nasıl Kullanılır?

Aracımızı kullanarak bir gradyan oluşturduktan sonra, CSS kodunu projelerinizde kullanabilirsiniz:

  1. CSS kodunu oluşturucudan kopyalayın.
  2. CSS dosyanıza yapıştırın veya HTML öğelerinizde satır içi olarak kullanın.
  3. kullanarak degradeyi herhangi bir öğeye uygulayın.background property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Daha karmaşık bir degrade efekti için ikiden fazla renk kullanın.
  • Geçişlerin nerede gerçekleşeceğini kontrol etmek için renk konumlarını ayarlayın.
  • Daha da yaratıcı efektler için birden fazla degradeyi birleştirin.
  • Konik gradyanlar için merkezi değiştirmek ilginç desenler oluşturur.
  • Favori degradelerinizi daha sonra kullanmak üzere kaydedin.

Tarayıcı Desteği

CSS gradyanları, modern tarayıcılarda yaygın olarak desteklenmektedir. Ancak, Internet Explorer gibi eski tarayıcılar bunları doğru şekilde oluşturmayabilir. Her zaman bir geri dönüş rengi sağlayın:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Bu araç hakkında

CSS Gradyan Oluşturucumuz, geliştiricilerin ve tasarımcıların zahmetsizce güzel gradyanlar oluşturmasına yardımcı olmak için tasarlanmıştır. İster bir web sitesinde, ister bir uygulamada çalışıyor olun, ister yalnızca renklerle denemeler yapmak isteyin, bu araç projeniz için mükemmel gradyanı oluşturmanızı kolaylaştırır.

Features

Kullanımı kolay

Degradeler oluşturmak için sezgisel arayüz.

Responsive Tasarım

Tüm ekran boyutlarında mükemmel çalışır.

Kopyala-Yapıştır Hazır

Anında temiz CSS kodu alın.

Ön Ayarlar Mevcut

Önceden tanımlanmış güzel gradyanlarla başlayın.

Related Tools

Stylus'tan CSS'ye Dönüştürücü

SCSS kodunuzu CSS'ye dönüştürün. Hızlı, kolay ve güvenli.

CSS3 Dönüşümlerini Kolaylıkla Oluşturun

Kod yazmadan karmaşık CSS3 dönüşümleri oluşturmak için güçlü, sezgisel bir araç. Değişiklikleri gerçek zamanlı olarak görselleştirin ve oluşturulan CSS'yi projelerinizde kullanmak üzere kopyalayın.

CSS Güzelleştirici

CSS kodunuzu profesyonel hassasiyetle biçimlendirin ve güzelleştirin

JSON Görüntüleyici

Büyük JSON'u Kolaylıkla Görüntüleyin - Yıldırım Hızında ve Pürüzsüz

JavaScript Gizleme Aracı

Güçlü gizleme aracımızla JavaScript kodunuzu yetkisiz erişime ve tersine mühendisliğe karşı koruyun. Tam işlevselliği korurken kodunuzu okunamaz bir biçime dönüştürün.

Yaş Hesaplayıcı

Kesin yaş hesaplayıcımızla tam yaşınızı yıl, ay ve gün olarak hesaplayın.