CSS Gradyan Oluşturucu

Nasıl kullanılır

1. Bir hazır ayarla veya varsayılan gradyanla başlayın.
2. Renk eklemek için çubuğa tıklayın; taşımak için durakları sürükleyin.
3. Doğrusal, Dairesel veya Konik seçin ve açıyı ya da merkezi ayarlayın.
4. CSS bildirimini veya Tailwind sınıfını kopyalayın.

Seçeneklerin açıklaması

Doğrusal

Renkler düz bir çizgi boyunca değişir. 0° yukarıya, 90° sağa, 180° aşağıya doğrudur.

Dairesel

Renkler bir merkez noktasından, öğeye sığan bir daire veya elips şeklinde yayılır.

Konik

Renkler, bir renk çarkı veya pasta grafiği gibi merkez noktasının çevresinde döner.

Tekrarla

Deseni tekrarlar; şerit elde etmek için durakları %0 ile %10 gibi kısa bir aralığa yerleştirin.

Oluşturulan kodun görünümü

Aynı iki renk, her türle yazıldığında. Duraklar her zaman yüzde konumuyla yazılır:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

Tailwind sürümü aynı değeri keyfi değerli (arbitrary-value) bir sınıfa sarar. Boşluklar alt çizgiye dönüşür ve virgüllerden sonraki boşluklar kaldırılır:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

Son CSS satırında desen elemanın her %10’unda tekrarlanır ve ince şeritler verir. Konik gradyanlarda açı, taramanın başladığı yerdir; dairesel gradyanlarda ise iki yüzde merkezi belirtir.

Sıkça sorulan sorular

Gizlilik

Bu araç tamamen tarayıcınızda çalışır. Dosyalarınız ve metinleriniz cihazınızda işlenir, sunucularımıza asla yüklenmez.