CSS Neumorphism Component Library
Design soft UI components with inset shadows, subtle gradients, and pressed states.
CSSNeumorphismUI LibraryShadows
Overview
Design soft UI components with inset shadows, subtle gradients, and pressed states.
HTML Structure
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Neumorphism Component Library</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<header class="header">
<h1>CSS Neumorphism Component Library</h1>
</header>
<main class="content">
<div class="card">
<div class="card-body">
<h2 class="card-title">Example Component</h2>
<p class="card-text">Demonstrating modern CSS techniques.</p>
</div>
</div>
</main>
</div>
</body>
</html>Core Styles
css
/* Custom Properties */
:root {
--color-primary: #6366f1;
--color-secondary: #8b5cf6;
--color-surface: #ffffff;
--color-text: #1e293b;
--radius: 12px;
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Base Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
/* Card Component */
.card {
background: var(--color-surface);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}
.card-body {
padding: 1.5rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 0.5rem;
}
/* Responsive Grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--color-surface: #1e293b;
--color-text: #f8fafc;
}
}Advanced Techniques
css
/* Animated gradient border */
.gradient-border {
position: relative;
padding: 3px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
filter: blur(12px);
opacity: 0;
transition: opacity var(--transition);
z-index: -1;
}
.gradient-border:hover::before {
opacity: 0.6;
}
/* Scroll-driven animation */
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}Browser Support
- Modern Evergreen browsers
- CSS custom properties: 95%+ support
- Container queries: 90%+ support
- \@layer\ cascade layers: 93%+ support
Tags
- CSS - Neumorphism - UI Library - Shadows
Related Projects
CSSNov 19, 2024
CSS Responsive Email Template
Build a cross-client email template with table layouts, inline styles, and media queries.
CSSEmailResponsiveTemplate
Read more → Source
CSSNov 15, 2024
CSS Clip-Path Shape Morphing
Create animated shape transitions using clip-path polygons and CSS transitions.
CSSClip-PathShapesAnimation
Read more → Source
CSSNov 11, 2024
CSS Gradient Pattern Backgrounds
Generate repeating geometric patterns using CSS gradients without any image files.
CSSGradientsPatternsBackgrounds
Read more → Source
Comments (0)
No comments yet. Be the first to comment!