CSS Gradyan Oluşturucu
Görsel olarak muhteşem CSS gradyanları oluşturun. Birden fazla renk durağı, açılar ve konumlarla doğrusal, radyal ve konik gradyanlar oluşturun. Üretime hazır CSS kodunu anında kopyalayın.
CSS gradyan nedir?
CSS gradyan, görüntü dosyaları kullanmadan iki veya daha fazla renk arasında yumuşak geçişler görüntüleyen bir CSS görüntü değeridir. Gradyanlar tarayıcı tarafından oluşturulur ve çözünürlükten bağımsız, yüksek performanslıdır.
Hangi CSS gradyan türleri desteklenir?
Bu oluşturucu üç türü destekler: linear-gradient (düz bir çizgide renkler), radial-gradient (merkezden yayılan renkler) ve conic-gradient (bir saat kadranı gibi merkez etrafında dönen renkler).
Doğrusal ve radyal gradyan arasındaki fark nedir?
Doğrusal gradyanlar renkleri bir açı veya yön anahtar kelimesi ile tanımlanan düz bir çizgide geçirir. Radyal gradyanlar renkleri merkezden dışa doğru dairesel veya eliptik şekillerde geçirir.
Kaç renk durağı kullanabilirim?
İhtiyacınız olduğu kadar renk durağı kullanabilirsiniz. Her durak bir renk ve isteğe bağlı olarak gradyan çizgisi üzerinde bir konum (%0 ile %100) tanımlar. Birden fazla durak karmaşık çok renkli geçişler oluşturur.
Oluşturulan CSS kodu nasıl kullanılır?
Oluşturulan CSS kodunu kopyalayın ve CSS stil sayfanızda background veya background-image özelliğinin değeri olarak yapıştırın. Kod tüm modern tarayıcılarda çalışır.
Gradyanlardaki renk durakları nedir?
Renk durakları, gradyan çizgisi boyunca belirli konumlarda belirli renkleri tanımlar. Örneğin "red 0%, blue 50%, green 100%" kırmızı başlayıp ortada maviye geçen ve yeşil biten bir gradyan oluşturur.
Açılı gradyanlar oluşturabilir miyim?
Evet, doğrusal gradyanlar 0deg ile 360deg arasındaki açı değerlerini destekler. Yaygın açılar için "to right", "to bottom", "to top left" gibi yön anahtar kelimelerini de kullanabilirsiniz.
CSS gradyanları duyarlı mı?
Evet, CSS gradyanları vektör tabanlı ve tarayıcı tarafından oluşturuldukları için doğuştan duyarlıdırlar. Kalite kaybı olmadan veya dosya boyutu artmadan herhangi bir kapsayıcı boyutuna mükemmel şekilde ölçeklenirler.
CSS gradyanları sayfa performansını etkiler mi?
CSS gradyanları genellikle çok performanslıdır. Görüntü dosyaları için HTTP isteklerini ortadan kaldırır ve donanım hızlandırmalıdır. Ancak çok sayıda durağa sahip son derece karmaşık gradyanlar düşük uç cihazlarda performansı etkileyebilir.
Gradyanları arka planlarda ve kenarlıklarda kullanabilir miyim?
Evet, gradyanlar background-image, border-image, mask-image ve CSS görüntü değerleri kabul eden herhangi bir özellik için kullanılabilir.
Hangi tarayıcılar CSS gradyanlarını destekler?
Chrome, Firefox, Safari, Edge ve Opera dahil tüm modern tarayıcılar CSS gradyanlarını destekler. IE10'dan beri destek mükemmeldir. Satıcı önekleri artık gerekli değildir.
Tekrarlayan bir gradyanı nasıl oluştururum?
Standart sürümler yerine repeating-linear-gradient veya repeating-radial-gradient kullanın. Bunlar tüm öğeyi doldurmak için gradyan desenini tekrarlayarak çizgili veya desenli efektler oluşturur.
CSS gradyanlarını canlandırabilir miyim?
CSS gradyanları doğrudan CSS geçişleriyle canlandırılamaz. Ancak background-position, background-size'ı canlandırabilir veya @property ile özel CSS özellikleri kullanarak gradyan animasyon efektleri oluşturabilirsiniz.
Bu gradyan oluşturucu ücretsiz mi?
Evet, bu CSS gradyan oluşturucu tamamen ücretsizdir. Kayıt gerekmez, kullanım sınırı yoktur ve oluşturulan tüm kod herhangi bir projede atıfta bulunulmadan kullanılabilir.
CSS Gradyan Oluşturucu Nasıl Kullanılır
CSS gradyanlarını görsel olarak oluşturun ve üretime hazır kodu anında kopyalayın. İşleme tarayıcınızda yerel olarak gerçekleşir, hiçbir yükleme yapılmaz.
- Gradyanın Type değerini seçin: linear-gradient veya radial-gradient.
- Doğrusal gradyanlarda Angle'i ayarlayın, radyal olanlarda circle veya ellipse gibi bir Shape seçin.
- Color Stops bölümünde renk durakları ekleyin, renklerini değiştirin ve sürükleyip konumlandırın.
- Presets altındaki bir paletin üzerine tıklayarak hazır bir karışımdan başlayın.
- Üretilen CSS'yi kopyalayın ve stil sayfanıza yapıştırın.
Farklı renkte iki durağı aynı konuma yerleştirmek sert bir kenar oluşturur — görüntüsüz şeritler yapmanın hızlı yolu.
İlgili Araçlar
- CSS Box Shadow Oluşturucu Ücretsiz çevrimiçi CSS box shadow oluşturucu. Ayarlanabilir ofset, bulanıklık, yayılma, renk ve inset ile görsel olarak güzel gölgeler oluşturun. Canlı önizleme ve anında kod kopyalama.
- CSS Border Radius Oluşturucu Görsel CSS border radius oluşturucu. Her köşeyi bağımsız ayarlayın, gerçek zamanlı önizleme ile CSS kodunu anında kopyalayın.
- CSS Grid Oluşturucu Canlı önizlemeli ücretsiz görsel CSS Grid oluşturucu. Etkileşimli olarak duyarlı ızgara düzenleri tasarlayın ve üretim hazır CSS kodunu anında dışa aktarın.
- CSS Flexbox Oluşturucu Canlı önizlemeli görsel CSS Flexbox oluşturucu. Flex özelliklerini ayarlayın ve kullanıma hazır CSS kodu alın.
- Border Radius Oluşturucu Ücretsiz çevrimiçi yaratıcı border radius oluşturucu. 8 kulbu sürükleyin veya bir blob hazır şekli seçin, organik CSS biçimleri oluşturun ve kodu anında kopyalayın.
- Renk Dönüştürücü Ücretsiz çevrimiçi renk dönüştürücü. HEX, RGB, HSL, HSV formatlarını görsel seçici ile anında dönüştürün. %100 gizli, tarayıcınızda çalışır.
- CSS Easing Oluşturucu Ücretsiz çevrimiçi CSS easing oluşturucu. Etkileşimli eğri üzerinde cubic-bezier kontrol noktalarını sürükleyin, 18 hazır ayardan birini seçin, döngüde oluşan top animasyonunu izleyin ve zamanlama fonksiyonunu anında kopyalayın.
- CSS Text Shadow Oluşturucu Ücretsiz çevrimiçi text-shadow oluşturucu. Ofset, bulanıklık, renk ve opaklıkla birden fazla gölge katmanı üst üste dizin, Neon, 3D, Retro hazır ayarlarını deneyin ve CSS'i anında kopyalayın.