Design Atlas
한국어
⬢ 3D modeling & rendering

Bevel

베벨

Cutting a sharp edge down into a small slanted or rounded face — light skimming across it draws a thin, bright highlight line.

Also known as: ChamferEdge bevel
···
html
<div class="sub-caps"><span>sharp edge</span><span>beveled edge</span></div>
css
.sub-caps{position:absolute;left:0;right:0;bottom:6%;display:flex;justify-content:space-around;font-size:clamp(8px,2.4vmin,12px);color:#dfe3ffcc;text-align:center;padding:0 3%}
js
import * as THREE from 'three';
import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b0b14);
const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);
camera.position.set(0, 0.7, 6.2);

const mat = new THREE.MeshStandardMaterial({ color: 0x8ecbff, roughness: 0.32, metalness: 0.15 });
const sharp = new THREE.Mesh(new THREE.BoxGeometry(1.5, 1.5, 1.5), mat);
sharp.position.x = -1.7;
const bevel = new THREE.Mesh(new RoundedBoxGeometry(1.5, 1.5, 1.5, 5, 0.16), mat);
bevel.position.x = 1.7;
scene.add(sharp, bevel);
const key = new THREE.DirectionalLight(0xffffff, 2.1); key.position.set(4, 3, 4); scene.add(key);
scene.add(new THREE.AmbientLight(0xffffff, 0.35));

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const r = t * 0.00026;
  sharp.rotation.set(r * 0.6, r, 0);
  bevel.rotation.copy(sharp.rotation);
  camera.lookAt(0, 0, 0);
  renderer.render(scene, camera);
});

A perfectly sharp edge barely exists in the real world — even the most angular object gets worn down just slightly in manufacturing. That’s why a mathematically perfect sharp edge in a render often reads as fake CG: a bevel adds a very narrow slanted (or rounded) face along that edge to bring the realism back.

There’s a more practical reason too. A perfectly sharp edge has its normal snap discontinuously at that line, so it can’t produce a crisp highlight when lit. The narrow face a bevel adds creates a region where the normal rotates smoothly, so light skimming across that angle draws a bright line running along it — that’s a big part of why product renders read as “premium.”

Blender’s Bevel modifier, Maya’s Chamfer, and C4D’s Bevel tool all let you control this with a width and a segment count (how rounded it gets). One segment gives an angular chamfer; several segments approach a rounded fillet.

When to use

Add it almost by default in product renders or hard-surface modeling whenever edges look flat and obviously CG.