Techniques
Glossy smiley sphere
The hero motif: a yellow ball built from a radial highlight, a highlight-to-shade gradient body, a bold brown outline, and a soft drop shadow — never a flat single-tone fill.
.smiley {
width: 160px;
height: 160px;
border-radius: 9999px;
border: 4px solid #5C3B12;
background:
radial-gradient(circle at 34% 28%, #FDE34F 0%, transparent 38%),
radial-gradient(circle at 50% 120%, #EF8E2E 0%, transparent 60%),
linear-gradient(160deg, #FCC21B 0%, #F8A91B 70%);
box-shadow:
0 14px 28px rgba(27, 27, 27, 0.45),
inset 0 -10px 18px rgba(92, 59, 18, 0.25);
}
Extruded candy button
A pressable button with a stacked solid-color offset under a soft blur, giving the chunky "physical sticker" depth that snaps down on press.
.candy-btn {
background: #FCC21B;
color: #5C3B12;
border: 2px solid #5C3B12;
border-radius: 9999px;
font-family: 'Baloo 2', sans-serif;
font-weight: 700;
box-shadow: 0 4px 0 #B5860C, 0 6px 12px rgba(27, 27, 27, 0.35);
transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 120ms ease;
}
.candy-btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 #B5860C, 0 2px 6px rgba(27, 27, 27, 0.30);
}
Sticker-cut outline
The peeled-sticker silhouette: a thick white-or-bordered ring plus a soft drop shadow that lifts any shape off the charcoal stage, mimicking a die-cut sticker edge.
.sticker {
border: 4px solid #5C3B12;
border-radius: 24px;
background: #4A4A4A;
box-shadow:
0 0 0 6px #3B3B3B,
0 10px 22px rgba(27, 27, 27, 0.45);
filter: drop-shadow(0 2px 0 rgba(27, 27, 27, 0.30));
}