skills.rest
GeneralJerel
GeneralJerelCOMMUNITY
Explore all skills by this author →
GitHub

Claymorphism

Generate claymorphism UI components with CSS patterns and accessibility guidance.

Updated Mar 23, 2026
Search Tags:#accessibility#ui-design#css-patterns#claymorphism#pastel-colors#double-shadow
One-click install
npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill claymorphism-generaljerel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Claymorphism
Source: https://github.com/GeneralJerel/awesome-style-refs/tree/main/skills/claymorphism
Command: npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill claymorphism-generaljerel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Claymorphism provides a tactile, depth-rich UI aesthetic that helps interfaces feel friendly and approachable without heavy realism, reducing design friction for teams seeking modern, soft UI.

Core Features & Use Cases

  • Pastel color palettes and rounded shapes for approachable interfaces across web and mobile.
  • Double-shadow technique creating subtle 3D depth for buttons, cards, and inputs.
  • Guidelines & patterns for typography, gradients, and motion to maintain consistency in design systems.
  • Use case: Craft a friendly onboarding screen with pill-shaped CTAs and softly elevated cards.

Quick Start

Create a claymorphic UI card using pastel gradients, a 32px border radius, and a double-shadow effect to demonstrate depth.

Frequently Asked Questions about Claymorphism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is claymorphism in UI design and how does the double-shadow technique work?▼

Claymorphism is a UI design style using pastel colors and rounded shapes to create tactile, soft 3D depth. The double-shadow technique applies subtle inner and outer shadows to elements like buttons and cards, making interfaces feel approachable without heavy realism.

How do I create claymorphic UI components for web and mobile interfaces?▼

You can create claymorphic UI components by applying specific CSS patterns for pastel gradients, a 32px border radius, and double-shadow effects. This approach provides design patterns and code snippets for buttons, cards, and inputs to ensure responsive layout consistency.

Does claymorphism support accessibility considerations for modern UI design systems?▼

Yes, claymorphism includes accessibility considerations alongside typography guidance and motion patterns. It delivers practical guidelines to maintain visual consistency and reduce design friction while ensuring soft, elevated UI elements remain accessible.

What's the best way to design a friendly onboarding screen using pastel colors and soft shadows?▼

The best way is to use claymorphism patterns featuring pill-shaped CTAs and softly elevated cards. This tactile aesthetic uses pastel color palettes and double-shadow rules to craft approachable interfaces with subtle 3D depth for onboarding screens.

Can I use claymorphism CSS patterns for both buttons and input fields?▼

Yes, claymorphism CSS patterns apply to web and mobile UI elements including buttons, cards, and inputs. The patterns provide double-shadow rules and rounded shapes that ensure consistent tactile depth across various interactive components.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

claymorphism

Design claymorphic UI components with soft 3D volume and rounded forms.

Community
Intermediate
GeneralJerelGeneralJerel

Skeuomorphism

Apply skeuomorphic design principles to UI components using CSS gradients, layered shadows, and texture patterns.

Community
Intermediate
polyuiislabpolyuiislab
1.2k

frontend-design

Generate production-grade frontend interfaces from bold aesthetic direction.

Community
Advanced
GatsbyhateyouGatsbyhateyou

neumorphism

Apply Neumorphism design with monochromatic backgrounds and dual shadows.

Community
Basic