Question 1

How do you make a flat shape look 3D in CSS?

Accepted Answer

Three layers do the work: a gradient that goes from a light tint to a darker edge, a small bright highlight where the light hits, and a soft shadow underneath. Pin the light source to the top-left and keep it consistent, and a plain square or circle reads as a raised, glossy object. This tool bakes all three into one background plus box-shadow rule.

Question 2

Why use radial-gradient for gems and orbs?

Accepted Answer

A sphere is brightest where the light hits and falls off toward the edges in every direction. A radial-gradient placed near the top-left does exactly that: light center, mid tone, dark rim. A linear-gradient only shades along one axis, so it suits flat panels and tiles rather than round, jewel-like pieces.

Question 3

How does an inset shadow create a raised or sunk look?

Accepted Answer

An inset box-shadow paints inside the element instead of outside. A light inset at the top edge plus a darker inset at the bottom edge fakes a bevel: the top catches light and the bottom is in shade, so the piece looks rounded and raised. Flipping which edge is light makes it look pressed in.

Question 4

What is the difference between CSS and Canvas gradients?

Accepted Answer

They describe the same idea differently. CSS uses background: radial-gradient(...) or linear-gradient(...) on an element. Canvas builds a gradient object with ctx.createRadialGradient() or ctx.createLinearGradient(), adds color stops, sets it as fillStyle and fills a path. Games usually draw to a canvas, so this tool gives both: paste the CSS for UI, or the Canvas snippet for in-game sprites.

Question 5

How do I make hexagon or diamond pieces?

Accepted Answer

Use clip-path with a polygon, e.g. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) for a diamond. One catch: clip-path also clips box-shadow, so an outer drop shadow disappears. For clipped shapes this tool switches the depth and glow to filter: drop-shadow(), which follows the clipped outline.

Game MaterialGem Generator

Game Material
Gem Generator