New to Claude Skills? Learn how to install them →

Get Claude Skills
mengto on GitHub

Beautiful Shadows

Free

Elevate your designs with refined shadow utilities.

by mengto4.6k stars on mengto/skills
3 views
Updated Aug 9, 2026
Get this skill

Free · Opens the source repo

What Beautiful Shadows does

Beautiful Shadows provides a set of precise Tailwind CSS shadow utilities designed for enhancing the visual depth of UI components. This skill is particularly useful for developers and designers who find the default Tailwind shadows too generic or lacking in sophistication. With three distinct shadow utilities—Beautiful sm, Beautiful md, and Beautiful lg—you can apply tailored shadow effects that add a polished, layered elevation to your surfaces without the distraction of colored tints.

Each shadow utility serves a specific purpose: Beautiful sm is ideal for compact cards and form controls, offering a subtle elevation; Beautiful md is suited for panels and popovers, providing a balanced lift; and Beautiful lg is perfect for hero media and modal-like containers, delivering the strongest visual impact. By using these utilities, you can maintain a clean aesthetic while ensuring that your components stand out appropriately in your design.

This skill is particularly beneficial in scenarios where neutral and refined shadows are required, allowing for a more elegant and professional appearance in your projects. It's an excellent choice for designers looking to create interfaces that feel both modern and approachable. The clear usage rules help ensure that shadows are applied consistently and effectively, enhancing the overall user experience without overwhelming the design.

However, it's important to use these utilities as intended, avoiding combinations with default Tailwind shadows or strong color tints. By adhering to the provided guidelines, you can achieve a sophisticated look that enhances your UI without compromising clarity or functionality.

When to use it

Use Beautiful Shadows when you need to add depth to UI components while maintaining a clean and polished look.

When not to use it

Avoid using this skill if you require highly colorful or complex shadow effects, as it focuses on neutral and refined shadows only.

What you can build with it

Creating Compact Cards

Use Beautiful sm shadows for compact cards to achieve a subtle elevation that enhances the visual hierarchy.

Designing Modal Containers

Apply Beautiful lg shadows to modal-like containers to provide a strong lift, making them stand out in your UI.

Improving Panel Designs

Utilize Beautiful md shadows for panels and popovers to create a balanced elevation that feels polished and professional.

How to install Beautiful Shadows

View source

1. Install with the skills CLI

npx skills add mengto/skills/beautiful-shadows --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by mengto

Beautiful Shadows

Use When

  • A surface needs polished, layered elevation.
  • Default Tailwind shadows feel too generic or blunt.
  • The design needs neutral, refined depth without colored glow.

Shadow Utilities

Use these exact Tailwind classes.

Beautiful sm

Use for compact cards, form controls, pills, and quieter surfaces.

shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]

Beautiful md

Use for cards, panels, popovers, and the default elevated surface style.

shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]

Beautiful lg

Use for hero media, feature callouts, modal-like containers, and the strongest lift.

shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]

Examples

<div class="rounded-xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
  ...
</div>

Usage Rules

  • Use Beautiful sm for compact cards, form controls, pills, and quieter surfaces.
  • Use Beautiful md for cards, panels, popovers, and the default elevated surface style.
  • Use Beautiful lg for hero media, feature callouts, modal-like containers, and the strongest lift.
  • Pair with a clean surface fill and a consistent radius.
  • Use one shadow strength per component state unless an interaction clearly changes elevation.

Avoid

  • Mixing these with default Tailwind shadow scales on the same component.
  • Tinting these shadows with strong colors; keep them neutral and refined.
  • Applying Beautiful lg to dense lists or tiny controls.
  • Stacking multiple shadow utilities on one element.
  • Using these as a substitute for clear borders in very low-contrast layouts.

Frequently asked questions about Beautiful Shadows

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.