3D & Hyperrealism
Also called: Hyperrealistic UI, 3D UI, Render style
UI that looks rendered in a 3D studio: glossy spheres and slabs, thick bevelled buttons, deep perspective and dramatic spotlight on a dark stage.
Design keywords
Say these words to ask for this style.
3D & Hyperrealism treats the screen as a dark product stage. Objects are shaded like real renders — specular highlights, rim light, bevelled edges, reflections and long contact shadows — and the layout leans into depth with perspective tilts, floating spheres and extruded headline type. Buttons are thick glossy keys that physically travel down when pressed. Saturated orange, cyan and violet light sources cut through near-black, giving a cinematic, premium, game-like energy.
Best for
- Game launches, esports and tournament hubs
- Hardware and product reveal pages
- Collectibles, NFTs and reward stores
- Bold app onboarding moments
Avoid for
- Text-heavy reading or documentation
- Low-end devices and data-saver contexts
- Calm healthcare or government services
✓ Do
- Light every object from one cool key light (top-left, rgba(150,165,255,.28)) plus up to three rim lights in orange #FF7A1A, cyan #38BDF8, violet #C084FC
- Give buttons real thickness: a 6px darker "side" shadow that collapses on press
- Use perspective (900–1400px) on hero objects, the showcase panel and the donut; card tilt only on hover
- Keep body text on flat dark panels so it stays readable, except the single featured orange render card, which takes dark #1A0A00 text
✕ Don't
- Don’t tilt forms, tables or long text
- Don’t use flat, unshaded colour blocks — every object needs a highlight and a shadow
- Don’t animate many 3D objects at once without prefers-reduced-motion
- Don’t use more than three rim-light colours besides the cool key light
Not to be confused with
On mobile
Keep one hero render per screen (an onboarding orb or a featured card) and render everything else as bevelled dark slabs. Thick 3D buttons feel great under the thumb; drop perspective tilts and big blurred shadows on scrolling lists to save GPU.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.