VUREXVUREX
CSS Tool

Neumorphism Generator

Generate beautiful neumorphic CSS shadows with real-time preview. Customize colors, shapes, blur, distance, and intensity. Copy-ready CSS code — 100% free and client-side.

Preview

#e0e0e0
150px
50300
10px
150
50%
10100
20px
180
30px
0150

Generated CSS

border-radius: 30px;
  background: #e0e0e0;
  box-shadow: 10px 10px 20px #a8a8a8,
             -10px -10px 20px #e9e9e9;

About This Tool

  • Real-time preview updates as you adjust settings
  • Shadow colors auto-calculated from background color
  • Four shape modes: Flat, Concave, Convex, and Pressed
  • Completely free with no registration or limits

Frequently Asked Questions

Neumorphism (or soft UI) is a design style that creates a soft, extruded look by using subtle shadows and highlights. Elements appear to be pushed out from or pressed into the background, creating a tactile, 3D-like effect using only CSS box-shadows and gradients.

Shadow colors are automatically calculated from your chosen background color. A lighter shade is created for the highlight shadow and a darker shade for the main shadow. The intensity slider controls how much the shades differ from the background color.

Flat creates a raised element with uniform background. Concave makes the surface appear curved inward using a gradient from dark to light. Convex creates a surface curved outward with a light-to-dark gradient. Pressed makes the element appear pushed into the surface using inset shadows.

Yes, VUREX Neumorphism Generator is completely free with no registration required. Generate as many neumorphic designs as you need and copy the CSS directly into your projects.