Cards cardneumorphism

Neumorphic Card

A soft UI card with deep shadows for a realistic elevated look.

John Doe Designer

Neumorphic design creates a soft, extruded appearance that mimics physical objects.

128 Projects
4.2k Followers

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { NeumorphicCard } from 'astro-component-kit';
---

<NeumorphicCard padding="lg"><p>Elevated focus container</p></NeumorphicCard>
--- import { NeumorphicCard } from 'astro-component-kit'; --- <NeumorphicCard padding="lg"><p>Elevated focus container</p></NeumorphicCard>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/NeumorphicCard.astro and paste the following code:

astro 
---
/**
 * NeumorphicCard — A soft UI card with deep shadows for a realistic elevated look.
 * 
 * @param {'sm'|'md'|'lg'} padding - Optional. Inner padding layout size. Default is 'md'.
 */
interface Props {
  padding?: 'sm' | 'md' | 'lg';
}

const { padding = 'md' } = Astro.props;
---

<div class={`neu-card neu-card--p${padding}`}>
  <slot />
</div>

<style>
  .neu-card {
    background: var(--c-bg-elev, #e0e0e0);
    border-radius: var(--r-xl, 30px);
    box-shadow: 15px 15px 30px rgba(0,0,0,0.1), -15px -15px 30px rgba(255,255,255,0.7);
    color: var(--c-text-1, #444);
    transition: all 0.3s ease;
  }
  
  .neu-card--psm { padding: var(--sp-4, 1rem); }
  .neu-card--pmd { padding: var(--sp-8, 2rem); }
  .neu-card--plg { padding: var(--sp-12, 3rem); }

  @media (prefers-color-scheme: dark) {
    .neu-card {
      box-shadow: 15px 15px 30px rgba(0,0,0,0.4), -15px -15px 30px rgba(255,255,255,0.05);
    }
  }
</style>
--- /** * NeumorphicCard — A soft UI card with deep shadows for a realistic elevated look. * * @param {'sm'|'md'|'lg'} padding - Optional. Inner padding layout size. Default is 'md'. */ interface Props { padding?: 'sm' | 'md' | 'lg'; } const { padding = 'md' } = Astro.props; --- <div class={`neu-card neu-card--p${padding}`}> <slot /> </div> <style> .neu-card { background: var(--c-bg-elev, #e0e0e0); border-radius: var(--r-xl, 30px); box-shadow: 15px 15px 30px rgba(0,0,0,0.1), -15px -15px 30px rgba(255,255,255,0.7); color: var(--c-text-1, #444); transition: all 0.3s ease; } .neu-card--psm { padding: var(--sp-4, 1rem); } .neu-card--pmd { padding: var(--sp-8, 2rem); } .neu-card--plg { padding: var(--sp-12, 3rem); } @media (prefers-color-scheme: dark) { .neu-card { box-shadow: 15px 15px 30px rgba(0,0,0,0.4), -15px -15px 30px rgba(255,255,255,0.05); } } </style>

Quick Info

Category
Cards
Filename
NeumorphicCard.astro
Dependencies
None — pure Astro + CSS
Tags
cardneumorphism