Game UI
Crystal Gem
A faceted gem material with angular cuts, inner glow, sharp highlights, and a collectible game-object feel.
Cg
Usage
- Reward icons
- Game cards
- Premium badges
Adjustable parameters
- facet count
- inner color
- glint
- outline
- glow
AI Prompt
Create a crystal gem UI material with faceted polygon highlights, saturated inner color, sharp white glints, and a clean web-friendly silhouette.
Tailwind notes
Use clip-path polygons or layered pseudo-elements to create facets without image assets.
Performance notes
Clip-path facets are cheap when static. Avoid animating many large polygons.
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" />;
}