Photorealistic Web Physics Laboratory

NSNextsem Labs

How To Build A Photorealistic CSS Candle (Step-by-Step)

Experience ultra-realistic 3D wax translucency, 4-zone combustion physics (blue oxygen base, glowing incandescent body), organic micro-turbulence, and wind draft mechanics without any images or 3D engines!

Step 1: 3D Wax Cylinder & Molten Dish

Designing the realistic wax pillar with 3D cylindrical lighting, translucent top rim, and liquid wax pool.

1 / 5

Wax cylinder assembly in progress

NS

1

/* Step 1: Photorealistic Wax Cylinder & Molten Well */

2

.candle-wrapper {

3

position: relative;

4

display: flex;

5

flex-direction: column;

6

align-items: center;

7

}

8

9

.wax-pillar {

10

width: 72px;

11

height: 160px;

12

background: linear-gradient(

13

90deg,

14

#e2d098 0%,

15

#fef9c3 22%,

16

#fef08a 45%,

17

#fde047 70%,

18

#ca8a04 92%,

19

#854d0e 100%

20

);

21

border-radius: 6px 6px 18px 18px;

22

position: relative;

23

box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.7),

24

inset 0 -8px 12px rgba(0, 0, 0, 0.4),

25

0 10px 30px rgba(0, 0, 0, 0.8);

26

}

27

28

.molten-pool {

29

width: 100%;

30

height: 16px;

31

background: radial-gradient(ellipse at center, #fef08a 0%, #ca8a04 70%, #713f12 100%);

32

border-radius: 50%;

33

position: absolute;

34

top: -8px;

35

left: 0;

36

border: 1px solid rgba(255, 255, 255, 0.5);

37

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);

38

}

39

40

.wax-drip {

41

position: absolute;

42

background: linear-gradient(90deg, #fef9c3, #eab308);

43

border-radius: 0 0 10px 10px;

44

box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);

45

}

46

47

.drip-left {

48

width: 9px;

49

height: 48px;

50

top: 0;

51

left: 8px;

52

}

53

54

.drip-right {

55

width: 7px;

56

height: 75px;

57

top: 0;

58

right: 12px;

59

}

60

61

.candle-shadow {

62

width: 120px;

63

height: 16px;

64

background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, transparent 75%);

65

margin-top: -6px;

66

}

Step 1 Technical Architecture & Physics

Deep-dive into the CSS algorithms and physics used to create this realism.

CSS3 Architecture

Key Technical Details

›Uses multi-stop linear-gradient to simulate cylindrical lighting (highlight at 25%, shadow edge at 85%).
›Curved top molten dish with elliptical border-radius simulates liquid wax well around the wick.
›3D wax drip trails rendered with realistic drop-shadows.