Game UI
Crystal Gem
Un material de gema facetada con cortes angulares, glow interno, brillos nítidos y sensación coleccionable.
Cg
Usos
- Iconos de recompensa
- Cartas de juego
- Badges premium
Parámetros
- facet count
- inner color
- glint
- outline
- glow
Prompt IA
Crea una gema UI con facetas poligonales, color interno saturado, brillos blancos y silueta limpia para web.
Notas Tailwind
Usa clip-path polygons o pseudo-elementos por capas para crear facetas sin imágenes.
Rendimiento
Las facetas clip-path son ligeras si son estáticas. Evita animar muchos polígonos grandes.
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);
}Ejemplo React
export function CrystalGem() {
return <span className="crystal-gem" aria-hidden="true" />;
}