Neumorphic UI Element - Buttons

Generate an image by following the description below:

Overall Style

• Theme: Soft neumorphic + chrome / glass hybrid
• Mood: Minimal, calm, light, slightly futuristic
• Background color: Very light warm gray #ECECEC to #F2F2F2
• Lighting direction: Top-left soft light source
• Shadows: Very soft, diffused, subtle depth
• Corner radius style: Large, pill-shaped elements
• Typography: Clean sans-serif (SF Pro / Inter / Helvetica Neue style)
• Text color: Dark gray #2E2E2E
• Accent glow: Subtle teal/blue-green bottom glow on main button

Layout Structure (Top to Bottom)

The UI is vertically centered with generous spacing between elements.

Main container:

• Width: ~420–480px
• Centered
• Vertical spacing between major blocks: 32–48px

1 Top Horizontal Toolbar Capsule

Container

• Shape: Rounded pill
• Height: ~72px
• Width: ~380px
• Border radius: 40px
• Background: soft light gray #E6E6E6
• Inner shadow for pressed depth
• Outer shadow: box-shadow: 6px 6px 12px rgba(0,0,0,0.08), -6px -6px 12px rgba(255,255,255,0.9);

Inside it are 4 evenly spaced elements:

A. Left Circular Icon (Black Glossy Ball)

• Diameter: ~56px
• Background: deep black/charcoal gradient radial-gradient(circle at 30% 30%, #2B2B2B, #0F0F0F)
• Gloss highlight at top-left (white blur overlay)
• Inner shine effect
• White abstract logo centered
• Shadow: 0 8px 16px rgba(0,0,0,0.25)

B. Date Capsule (“Feb 10th Mon”)

• Rounded square
• Size: ~64x64px
• Border radius: 20px
• Background: light gray #DADADA
• Slight inset shadow
• Text:
  • Line 1: “Feb 10th”
  • Line 2: “Mon”
  • Centered
  • Medium weight
  • Dark gray

C. Sparkle Icon (Sparkle)

• Black
• Size: ~22px
• No background
• Centered vertically

D. Expand Arrow Button (Top Right)

• Circular
• Diameter: ~56px
• Background: light gray #E0E0E0
• Soft inner shadow
• Arrow icon pointing up-right
• Slight pressed chrome feel

2 Middle Control Section

Two elements aligned horizontally:

A. Play Toggle Pill

Outer Pill

• Width: ~280px
• Height: ~64px
• Border radius: 40px
• Background: very soft gray #E8E8E8
• Dual neumorphic shadow: box-shadow: 8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.9);

Inside Left: Small Round Toggle

• Diameter: ~36px
• Very light gray
• Slight inset look

Center: Play Button

• Circle ~40px
• Background: darker gray #BFC3C7
• White play triangle icon centered

Text: “Play”

• Medium weight
• Font size: ~18px
• Dark gray
• Vertically centered

Spacing between internal elements: ~16px

B. Chat Bubble Chrome Button (Right)

• Circular
• Diameter: ~64px
• Chrome gradient: linear-gradient(to bottom, #DADADA, #AFAFAF)
• Strong glossy highlight at top
• Inner bevel
• chat icon centered (white or very light gray)
• Stronger shadow than others: 0 10px 20px rgba(0,0,0,0.18)

3 Main Call-to-Action Button (“Submit”)

This is the most visually prominent element.

Size

• Width: ~360px
• Height: ~90px
• Border radius: 45px

Background

• Chrome-style vertical gradient: linear-gradient( to bottom, #E2E6E6 0%, #BFC5C6 50%, #9FA6A8 100% )

Highlights

• Strong top white gloss band: inset 0 6px 10px rgba(255,255,255,0.6)
• Subtle inner bottom darkening: inset 0 -8px 12px rgba(0,0,0,0.1)

Outer Shadow

• 0 20px 40px rgba(0,0,0,0.12)

Bottom Glow (Key Detail) Soft teal glow underneath: 0 25px 40px rgba(0, 200, 180, 0.25) Glow color: rgba(0, 180, 160, 0.3)

Text

• “Submit”
• Font size: ~28px
• Weight: 500
• Color: #2F2F2F
• Perfectly centered

Spacing System

• Toolbar → Middle controls: 36px
• Controls → Title: 48px
• Title → Subtitle: 8px
• Subtitle → Main button: 40px

Visual Characteristics to Emphasize

To replicate accurately:

1. Very soft shadows (no harsh edges)
2. Large corner radii
3. Subtle gradients everywhere
4. Neumorphic lighting (top-left light source)
5. Chrome feel achieved through layered gradients + inset highlights
6. Muted grayscale palette with single teal glow accent
7. Plenty of breathing space