Neumorphism Oluşturucu

Neumorphism, öğenin arka planla aynı renkte olup biri açık biri koyu iki gölgeyle yüzeyden kabarıyor ya da içine gömülüyormuş gibi göründüğü yumuşak bir tasarım stilidir. Derinlik hissini renk farkı değil, ışık-gölge yanılsaması yaratır.

Bu araçta taban rengini, gölge mesafesini, bulanıklığı ve biçimi (dışbükey/içbükey/gömük) seçer, sonucu canlı önizlersiniz. Üretilen çift gölgeli CSS'i doğrudan kopyalayabilirsiniz.

Neumorphism, öğelerin arka plandan kesilip çıkarılmış gibi görünmesini sağlar. Bunu iki gölge ile yapar: biri açık renkli ve sol üstten, diğeri koyu renkli ve sağ alttan. Böylece yüzeyin kabarık ya da içeri gömülü olduğu izlenimi doğar.

Kritik nokta, öğe ile arka planın aynı renkte olmasıdır. Farklı renkler kullanıldığında etki bozulur ve sıradan bir gölgeli kutuya dönüşür. Bu yüzden neumorphism tasarımları genellikle tek bir yumuşak renk tonu üzerine kurulur.

Bu stilin bilinen bir zayıflığı vardır: kontrast çok düşüktür. Düğme ile arka plan aynı renkte olduğu için, düğmenin sınırlarını yalnızca hafif gölgelerden ayırt edersiniz. Görme güçlüğü olan kullanıcılar, parlak ışıkta telefon bakanlar ve düşük kaliteli ekranlar için bu ciddi bir engeldir.

Bu yüzden neumorphism'i kritik eylemlerde — form gönderme, satın alma, silme — tek başına kullanmamak gerekir. Metin etiketi, simge veya belirgin bir kenarlık eklemek, düğmenin düğme olduğunu görünür kılar.

Küçük ve kapalı arayüzlerde etkilidir: bir müzik çalar, bir hesap makinesi, bir kumanda paneli. Kullanıcının zaten ne yapacağını bildiği, öğe sayısının az olduğu yerlerde estetik katkısı yüksektir.

Bilgi yoğun sayfalarda ise hızla yorucu hâle gelir. Ürettiğiniz CSS'i kopyalayıp deneyebilirsiniz; hesaplama tarayıcınızda yapılır, hiçbir veri gönderilmez.