Güzel degradeler tasarlayın ve CSS veya resim olarak dışa aktarın
Tam ihtiyacınız olan degradeyi oluşturmak için renkleri seçin, duraklar ekleyin ve açıyı veya merkez noktasını ayarlayın. Araç, sınırsız renk duraklarıyla doğrusal, radyal ve konik degradeleri destekler. Stil sayfanız için CSS kodunu kopyalayın veya tasarım projelerinde kullanmak üzere degradeyi yüksek çözünürlüklü PNG olarak indirin.
Bu aracı ücretsiz kullanınBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
Nasıl kullanılır
Degrade türünü seçin
Doğrusal, radyal veya konik seçeneğini seçin. Doğrusal için açıyı ayarlayın; radyal için merkez noktasını ve şekli ayarlayın.
Renkleri ekleme ve ayarlama
Renk durakları eklemek için degrade çubuğunu tıklayın. Yeniden konumlandırmak için sürükleyin, rengi değiştirmek için çift tıklayın ve her durak için opaklığı ayarlayın.
CSS'yi kopyalayın veya indirin
Oluşturulan CSS kodunu web kullanımı için kopyalayın veya bir çözünürlük ayarlayın ve degradeyi PNG görüntüsü olarak indirin.
Özellikler
Üç degrade türü
Herhangi bir açıya sahip doğrusal degradeler, ayarlanabilir merkezi ve şekli olan radyal degradeler veya bir noktanın etrafında uzanan konik degradeler oluşturun. Türler ve önizleme güncellemeleri arasında anında geçiş yapın.
Sınırsız renk durağı
Degrade çubuğuna istediğiniz kadar renk durağı ekleyin. Durakları yeniden konumlandırmak için sürükleyin, rengini değiştirmek için çift tıklayın veya silmek için sağ tıklayın. Her durak, yarı saydam degradeler için opaklığı destekler.
CSS kod çıkışı
Araç, satıcı önekleriyle geçerli CSS arka plan resmi kodu oluşturur. Kodu kopyalayın ve doğrudan stil sayfanıza yapıştırın. Siz degradeyi düzenlerken çıktı gerçek zamanlı olarak güncellenir.
PNG resim dışa aktarımı
Degradeyi, 100 piksellik küçük resimlerden 4000 piksellik bannerlara kadar herhangi bir çözünürlükte PNG olarak indirin. Görüntüyü, CSS degradelerini desteklemeyen araçlarda arka plan, kaplama veya tasarım öğesi olarak kullanın.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhanceÖzellikler
| Degrade türleri | Doğrusal, radyal, konik |
| Renk durakları | Sınırsız |
| Açı aralığı | 0–360° |
| CSS çıktısı | Standart + satıcı önekleri |
| PNG'yi dışa aktarma | 4000 × 4000 piksele kadar |
| İşleme | İstemci tarafı (anlık) |
Related Magic Eraser Tools
Sık sorulan sorular
Şeffaflık içeren bir degrade oluşturabilir miyim?
+
Evet. Her renk durağının bir opaklık kaydırıcısı vardır. Degradede yarı saydam alanlar oluşturmak için opaklığı %100'ün altına ayarlayın. CSS çıktısı rgba değerlerini kullanır ve PNG dışa aktarımı alfa kanalını korur.
Konik gradyan nedir?
+
Konik bir degrade, saat ibresinin hareketi gibi, bir merkez noktanın etrafındaki renk duraklarını yayar. Pasta grafiği tarzı efektler, renk tekerlekleri ve dekoratif arka planlar için kullanışlıdır. Tarayıcı desteği modern tarayıcılarda mükemmeldir.
Oluşturulan CSS'yi herhangi bir çerçevede kullanabilir miyim?
+
Evet. Çıktı, düz HTML, React, Vue, Tailwind ve satır içi veya stil sayfası tabanlı CSS'yi destekleyen diğer çerçevelerde çalışan standart CSS'dir.
Bir fotoğrafın üzerinde degradeye mi ihtiyacınız var?
AI Enhance, fotoğraflarınızın renk tonunu ve aydınlatmasını ayarlayabilir ve Görüntü Yerleşimi Aracımız, parlak bir görünüm için herhangi bir görüntünün üstüne bir degrade karıştırmanıza olanak tanır.
Ücretsiz deneyinMore free tools
Explore our other limited free edits after sign-in photo and image tools.
Renkleri HEX, RGB, HSL, HSB, CMYK ve CSS adlı formatlar arasında dönüştürün. Canlı önizlemeyi görün, herhangi bir değeri kopyalayın ve bir renk kartını dışa aktarın. Kayıt olmanıza gerek yok.
HEX renk kodlarını RGB değerlerine (veya tam tersi) dönüştürün. Canlı önizleme, tek tıklamayla kopyalama ve CSS pasajı çıktısı. Kayıt olmanıza gerek yok; tarayıcınızda çalışır.
Yüklenen bir görüntüden herhangi bir rengi seçin ve HEX, RGB ve HSL kodlarını anında alın. Web tasarımı, markalama ve illüstrasyon için fotoğraflardan paletler oluşturun.
Bir fotoğraf yükleyin ve HEX, RGB ve HSL kodlarıyla 5-10 baskın rengi çıkarın. Renk örneklerini kopyalayın, ASE veya CSS değişkenleri olarak dışa aktarın. Kayıt olmanıza gerek yok.
URL'ler, metinler, WiFi kimlik bilgileri ve vCard'lar için QR kodları oluşturun. Renkleri özelleştirin, merkez logosu ekleyin ve PNG veya SVG olarak indirin. Kayıt olmanıza gerek yok.
Görüntüler ve video için genişlik, yükseklik veya en boy oranını hesaplayın. Herhangi iki değeri girin ve üçüncüyü alın. Sosyal medya, film ve baskı için önceden ayarlanmış oranlar. Kayıt olmanıza gerek yok.