AI Prompt to Create a Neumorphic UI Dashboard

Create a brutalist artist website from this AI prompt template.

You can enter the following prompt into a Large Language Model (LLM) such as ChatGPT, Claude, or Gemini to create a neumorphic UI dashboard in HTML and CSS. The prompt is quite specific, which helps nudge the AI to a result that's likely what you're looking for. Feel free to tweak it as you please.

The Prompt:

Generate the HTML and CSS for a single dashboard widget using a Neumorphic (soft UI) design style. The widget should be a "Monthly Revenue" card.

Features:

  • A container div with the characteristic Neumorphic style: appearing to be extruded from the background. It should have a light background color (e.g., #e0e0e0) and use multiple, subtle box-shadow properties (one light, one dark) to create the effect.
  • The widget should contain:
    • A title: "Monthly Revenue"
    • A large display of the revenue amount: "$14,850"
    • A small percentage change indicator with an up-arrow icon (e.g., "+5.2%").
    • Two Neumorphic buttons inside the card: one "pushed in" (concave) and one "pushed out" (convex). Label them "View Report" and "Details".

Core Requirements:

  • Technology: Provide the HTML and CSS in a single block.
  • Accessibility: This style can have low contrast, so pay special attention to ensure the text has a contrast ratio of at least 4.5:1 against the background, even if it slightly compromises the aesthetic. The buttons must have clear focus states.
  • Responsiveness: The widget card should be fluid and resize gracefully.
  • Best Practices: The CSS should be the star here, with well-crafted box-shadow effects. Use CSS variables for the background color and shadow colors to make it easy to adjust.

The Result

When I ran the above prompt against Google Gemini Pro 2.5, I got the following result:

Screenshot of neumorphic UI dashboard AI prompt result

How to Use The Prompt

  1. Copy the entire prompt text.
  2. Paste it into your preferred LLM (e.g., ChatGPT, Claude, Gemini, etc).
  3. Review the generated code. You can ask the LLM for modifications, like changing colors or fonts, by replying with follow-up instructions.

The prompt includes a Core Requirements section that instructs the LLM to focus on quality, accessibility, and responsive design, ensuring you get a professional-grade starting point.

Be sure to check the prompt carefully for anything you want to change first. You can also use it as a template starter for future projects.