---
name: css-glassmorphism-generator
description: "Generate the CSS properties for modern, frosted-glass UI elements. Use when the user wants help with CSS Glassmorphism Generator. Related topics: design, css, coding."
---

# CSS Glassmorphism Generator

Generate the CSS properties for modern, frosted-glass UI elements.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **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)

## Prompt template

## Introduction
Create stunning glassmorphism effects for your web app.

## Design Parameters
- Background Color (Hex or Name): {{Background Color (Hex or Name)}}
- Glass Opacity (1-100): {{Glass Opacity (1-100)}}
- Blur Amount (px): {{Blur Amount (px)}}

## Advanced Settings
- Include Border?: {{Include Border?}}
- Border Color/Opacity: {{Border Color/Opacity}}
- Add Box Shadow for depth? {{Add Box Shadow for depth?}}
- Output Format: {{Output Format}}

---
**Goal**: Output the precise CSS code required to create the frosted glass effect.

---

Source: [CSS Glassmorphism Generator on PromptBuild](https://promptbuild.io/prompt/i0iUjEa5ICrKv13WbkSR/css-glassmorphism-generator)