İçeriğe geç
uxTools
Tasarım & CSS

Neumorphism Üretici

Bir base renk seç ve aracın açık + koyu gölgeleri türetmesini izle. Gölge mesafesi, yoğunluk, bulanıklık ve ışık kaynağı açısını ayarla, sonra convex, concave, flat ve pressed modları arasında geçiş yap — CSS, Tailwind, React inline, SCSS veya JSON olarak kopyala.

Canlı önizleme

Modu seç, ışık kaynağını ayarla — kart, buton, toggle ve daire aynı anda değişir.

Önizleme
Kart

Kart

Buton

Buton

Daire

Daire

Toggle

Toggle

Hazır şablonlar

Hazırlanmış başlangıç noktaları — birine tıkla, tüm ayarları yükle.

Temel renk

Tek kaynak — tüm gölge renkleri bu renkten parlaklık kaydırılarak türetilir.

Açık vurgu

#ffffff

Koyu gölge

#b1bdcf

Şekil

Genişlik ve yükseklik kozmetiktir; yalnızca köşe yarıçapı CSS çıktısında yer alır.

px
px
px

Gölge

Mesafe, bulanıklık ve şiddet yükseklik hissini belirler; açı ışığın geldiği yönü seçer.

px
px
Işık kaynağı: 45°
45°

Kod çıktısı

Doğrudan kullanılabilen CSS, Tailwind arbitrary-value kombosu, React inline stil, SCSS değişkenleri veya JSON kopyala.

background: #e0e5ec;
border-radius: 24px;
box-shadow: -6px 6px 18px #ffffff, 6px -6px 18px #b1bdcf;