CSS Glassmorphism Generator skill for Claude

CSS Glassmorphism Generator as a Claude skill. Claude asks for Background Color (Hex or Name), Glass Opacity (1-100), Blur Amount (px) and 4 more, then does…

Install it once and Claude runs it for you. When your request matches, Claude loads the skill, asks for anything it is missing, and works through the template itself. Prefer to fill it in by hand? See the full prompt template.

Download the skill (.zip) · View SKILL.md

When Claude uses it

Use when the user wants help with CSS Glassmorphism Generator. Related topics: design, css, coding.

What Claude will ask you for

• Background Color (Hex or Name) (free text, e.g. "")
• Glass Opacity (1-100) (number from 1 to 100)
• Blur Amount (px) (number from 1 to 50)
• Include Border? (choose one: Yes, No)
• Border Color/Opacity (free text, e.g. "")
• Add Box Shadow for depth? (choose one: Yes, No)
• Output Format (choose one: Raw CSS, Tailwind CSS Classes, Styled Components)

How to install

Claude.ai and the Claude desktop app

1. Download the skill .zip.
2. Open Settings, then Capabilities, and find Skills.
3. Choose Upload skill and select the .zip.
4. Ask Claude for help with the task. It loads the skill when your request matches.

Claude Code

1. Download the skill .zip.
2. Unzip it into ~/.claude/skills/ (or .claude/skills/ inside a project).
3. Start a new session. Claude Code loads the skill when your request matches.