Game UI
Crystal Gem
Angular cuts, inner glow, sharp highlights और collectible game-object feel वाला faceted gem material.
Cg
Usage
- Reward icons
- Game cards
- Premium badges
Parameters
- facet count
- inner color
- glint
- outline
- glow
AI Prompt
Faceted polygon highlights, saturated inner color, sharp white glints और clean web silhouette वाली crystal gem UI material बनाएं.
Tailwind notes
Images के बिना facets बनाने के लिए clip-path polygons या layered pseudo-elements उपयोग करें.
Performance notes
Static clip-path facets हल्के हैं. Many large polygons animate न करें.
CSS
.crystal-gem {
clip-path: polygon(50% 0, 92% 24%, 80% 82%, 50% 100%, 20% 82%, 8% 24%);
background:
linear-gradient(135deg, rgba(255,255,255,.75), transparent 24%),
linear-gradient(45deg, #72fff7, #6e6bff 48%, #ff7adf);
box-shadow: 0 18px 50px rgba(113, 111, 255, .28);
}React example
export function CrystalGem() {
return <span className="crystal-gem" aria-hidden="true" />;
}