Modern neumorphic web UI component

calendar_today3/2/2026
visibility6 views
favorite0 favorites
fork_right0 forks

Prompt to Nano Banana. After the image is generated, ask Gemini to turn it into HTML:

Turn that into HTML with Tailwind CSS so that it can be used on web

description
Prompt

Generate an image that shows a modern, minimal, neumorphic-style UI component designed for a web interface.

Overall Layout

  • A rounded rectangular container panel centered on a dark background.
  • The background is a deep navy-to-black gradient with subtle ambient lighting.
  • The container appears slightly elevated with soft shadows and a faint glow, giving it a floating effect.
  • The surface beneath reflects the UI slightly, creating a glossy, premium feel.

Inside the Container

There are three square cards aligned horizontally, evenly spaced:

  1. Left Card – Personal
  • Rounded square shape.
  • Top section: dark navy header bar with the word “Employee”.
  • Below: a minimal user/person icon.
  • Bottom: small label text (e.g., “工作人员”).
  • A subtle blue glow underneath the card.
  • Soft inner shadow creating a neumorphic depth effect.
  1. Center Card – Security
  • Same rounded square structure.
  • Top header: dark navy with “Security”.
  • Center icon: lock symbol.
  • Small label text underneath (e.g., “安全”).
  • A subtle red glow beneath the card.
  • Slightly stronger illumination to emphasize importance.
  1. Right Card – Notifications
  • Same design consistency.
  • Header: dark navy with “Move Forward”.
  • Center icon: upward arrow / trending arrow symbol.
  • Small label text (e.g., “前行”).
  • Subtle green glow beneath.
  • Balanced soft shadow and highlight effects.

Visual Style Characteristics

  • Neumorphism (soft shadows + soft highlights).
  • Frosted glass / soft plastic look.
  • Clean sans-serif typography.
  • Symmetry and consistent spacing.
  • Soft glow lighting in blue, red, and green.
  • High-end SaaS dashboard aesthetic.
  • Subtle reflection beneath the UI element.
  • Smooth rounded corners everywhere.
  • Minimal but dimensional.

folder_open
Artifacts (2)

Neumorphic Settings Cards.png
download
IMAGENeumorphic Settings Cards.png
download
HTMLui_design.html

Community (0)

Loading comments...

Metadata

Nano Banana Pro (Gemini 3 Pro Image)
Google - Nano Banana - Nano Banana Pro (Gemini 3 Pro Image)
AI Studio
AI Studio
codeCoding

More from Yuan Tian

No other prompts yet.