CSS gradyan ve gölge oluşturucu nasıl kullanılır
- 1
Gradyan ya da kutu gölgesi seçin
İki düzenleyici arasında önizlemenin üstündeki sekmelerle geçiş yapın.
- 2
Hazır ayarla başlayın
Yüklemek için bir hazır ayar kutucuğuna tıklayın ya da varsayılanı koruyup oradan ayarlayın.
- 3
Görsel olarak ayarlayın
Renk duraklarını sürükleyip açıyı ayarlayın ya da gölge katmanları ekleyip kaydırma, bulanıklık ve yayılmayı düzenleyin.
- 4
Kodu kopyalayın
CSS bildirimini ya da Tailwind sınıfını kopyalayıp projenize yapıştırın.
Sınırlar ve Pro
Kayıt gerektirmeden ücretsiz: sınırsız renk durağı ve gölge katmanı, 3 gradyan türü, 3 renk karışımı uzayı ve 24 hazır ayar.
Pro reklamları kaldırır; her iki düzenleyici de tüm planlarda eksiksizdir. Pro'yu gör
CSS gradyan ve gölge oluşturucu hakkında
Gradyanlar ve gölgeler, tarayıcının geliştirici araçlarında en sık deneme yanılmayla ayarlanan iki CSS efektidir. Bu oluşturucu her biri için büyük bir canlı önizlemeli görsel bir düzenleyici sunar, ardından tam CSS bildirimini ve bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)] gibi eşleşen bir Tailwind isteğe bağlı değer sınıfını yazar. Sonucu doğrudan stil dosyanıza ya da className alanınıza yapıştırabilirsiniz.
Gradyan düzenleyicisi doğrusal, dairesel ve konik gradyanlar oluşturur. Durak çubuğuna tıklayarak tıkladığınız yere yeni bir renk ekleyebilir, bir durağı sürükleyerek taşıyabilir ya da hassas konumlar için ok tuşlarını kullanabilirsiniz. Her durağa ayrı bir opaklık da verebilirsiniz. Doğrusal ve konik gradyanlar açı, dairesel ve konik gradyanlar merkez noktası alır; dairesel gradyanlarda daire ya da elips şekli seçilir. Hepsi çizgiler ve halkalar için tekrarlı olabilir. Karıştırmada kullanılacak renk uzayını da seçebilirsiniz: OKLab ve OKLCH, doygun renkler arasında klasik sRGB karışımının oluşturduğu gri ve çamurlu ortayı önler ve güncel tüm tarayıcılarda desteklenir.
Kutu gölgesi düzenleyicisi istediğiniz kadar katmanı üst üste ekler. Her katmanda X ve Y kaydırma, bulanıklık, yayılma, opaklıklı renk, iç gölge anahtarı ve görünürlük düğmesi bulunur. İlk katman en üstte çizildiği için katmanların sırasını değiştirebilirsiniz. Boyutu, köşe yarıçapı ve renkleri ayarlanabilen önizleme kutusu, efekti açık ya da koyu bir yüzeyde gösterir.
Her düzenleyici için on iki hazır ayar bir başlangıç noktası sunar: gün batımları, renk çarkları ve çizgiler; Material yükseltileri, katmanlı yumuşak gölgeler, neumorphism ve sert kaydırmalar. Araç yalnızca gradyanları ve kutu gölgelerini kapsar; text-shadow, filter: drop-shadow ve SVG gradyanları oluşturulmaz.
Gizlilik
Her şey sayfanın içinde olur: renkler ve ayarlar tarayıcınızdan çıkmaz, hiçbir resim yüklenmez. Geçerli gradyanınız ve gölgeniz yerel depolamada saklanır, böylece geri döndüğünüzde hâlâ orada olur.
Özellikler
Doğrusal, dairesel ve konik
Opaklıklı sürüklenebilir renk durakları, açı, merkez, şekil ve tekrarlı mod.
Çok katmanlı gölgeler
Gerçekçi derinlik için gölge katmanlarını üst üste ekleyin, sıralayın, gizleyin ve iç gölge yapın.
CSS ve Tailwind
Hazır bir bildirimi ya da Tailwind isteğe bağlı değer sınıfını kopyalayın.