Back to Components
Animated Egg Toggle Switch with Crack Effect using HTML & CSS
Component

Animated Egg Toggle Switch with Crack Effect using HTML & CSS

CodewithLord
December 16, 2025

A playful and creative egg-themed toggle switch animation featuring 3D transforms, cracking egg effects, and SVG flipper motion using pure HTML and CSS.

🧠 Description


This project showcases a highly creative animated toggle switch designed to look like a real egg cracking open when toggled. Built entirely with HTML and CSS, it uses advanced techniques such as 3D transforms, keyframe animations, clip-paths, and SVG icons to simulate a realistic cracking egg and flipper motion.

When the switch is toggled: <br-

The egg rolls and cracks open

  • The shell splits into pieces
  • The egg white and yolk animate smoothly
  • A flipper SVG animates in and out for extra personality

This is a perfect example of experimental UI animation, ideal for creative portfolios, CodePen experiments, or showcasing CSS mastery.


💻 HTML Code


1<!DOCTYPE html>
2<html lang="en" >
3<head>
4  <meta charset="UTF-8">
5  <title>Egg Toggle Switch | @coding.stella</title>
6  <link rel="stylesheet" href="https://public.codepenassets.com/css/reset-2.0.min.css">
7<link rel="stylesheet" href="./style.css">
8
9</head>
10<body>
11
12<label class="egg-switch">
13    <input type="checkbox" checked>
14    <div>
15        <div class="flipper">
16            <svg>
17                <use xlink:href="#flipper">
18            </svg>
19        </div>
20        <div class="egg">
21            <div class="front"></div>
22            <div class="back"></div>
23        </div>
24    </div>
25</label>
26
27<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
28    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 18" id="flipper" fill="currentColor">
29        <path d="M0.0244740693,1.75473835 C0.00818305726,1.86197078 0,1.97036486 0,2.07892575 L0,15.921377 C0,17.0693688 0.8954305,18 2,18 C2.10445462,18 2.20874874,17.9914953 2.31192515,17.9745638 L17.3119251,15.5130366 C18.2840292,15.3535125 19,14.4826852 19,13.4598497 L19,12.6377416 C19.6666667,11.5984301 20.3333333,11.0787744 21,11.0787744 L39,11.0787744 L39,6.92152835 L21,6.92152835 C20.3333333,6.92152835 19.6666667,6.4018726 19,5.36256109 L19,4.540453 C19,3.51761755 18.2840292,2.64679022 17.3119251,2.48726617 L2.31192515,0.0257389154 C1.2208723,-0.153304839 0.196745571,0.620794577 0.0244740693,1.75473835 Z M12.2049236,12.279252 C12.6185695,12.2575737 12.9714694,12.5753263 12.9931477,12.9889722 C13.0130194,13.3681476 12.747675,13.6962795 12.3847003,13.7650328 L12.2834275,13.7771963 L3.79507644,14.2220519 C3.38143055,14.2437302 3.02853059,13.9259776 3.00685233,13.5123317 C2.98698059,13.1331563 3.25232501,12.8050244 3.61529975,12.7362711 L3.71657251,12.7241076 L12.2049236,12.279252 Z M16.75,5 C16.8683467,5 16.9674868,5.08223341 16.9933973,5.19267729 L17,5.25 L17,12.75 C17,12.8880712 16.8880712,13 16.75,13 C16.6316533,13 16.5325132,12.9177666 16.5066027,12.8073227 L16.5,12.75 L16.5,5.25 C16.5,5.11192881 16.6119288,5 16.75,5 Z M13.7339356,9.6630893 C14.1480861,9.65586028 14.4896817,9.9857353 14.4971398,10.3998858 C14.5035373,10.7795237 14.2269029,11.0981954 13.8617498,11.1542391 L13.7601142,11.1628608 L3.26171343,11.3461111 C2.84756295,11.3533401 2.50596738,11.0234651 2.49850922,10.6093146 C2.49211175,10.2296767 2.76874618,9.91100505 3.13389925,9.85496129 L3.23553482,9.84633957 L13.7339356,9.6630893 Z M3.26171343,6.6630893 L13.7601142,6.84633957 C14.1742647,6.8535686 14.5041397,7.19516417 14.4971402,7.60931465 C14.4902841,7.98895258 14.2026967,8.29777572 13.8358102,8.34104168 L13.7339356,8.34611112 L3.23553482,8.16286085 C2.82138434,8.15563182 2.49150933,7.81403625 2.49850889,7.39988577 C2.50536496,7.02024784 2.79295235,6.7114247 3.15983888,6.66815874 L3.26171343,6.6630893 Z M3.79507644,3.77925197 L12.2834275,4.2241076 C12.6970734,4.24578586 13.0148259,4.59868582 12.9931477,5.01233171 C12.9732759,5.39150712 12.675086,5.69010548 12.306913,5.72054092 L12.2049236,5.7220519 L3.71657251,5.27719627 C3.30292661,5.25551801 2.98517406,4.90261805 3.00685233,4.48897215 C3.02672407,4.10979675 3.32491404,3.81119839 3.69308704,3.78076294 L3.79507644,3.77925197 Z"></path>
30    </symbol>
31</svg>
32
33  <script  src="./script.js"></script>
34
35</body>
36</html>

HTML Structure Breakdown

.egg-switch — The main label element acting as the clickable toggle container.

input[type="checkbox"] — Controls the toggle state (checked / unchecked).

div.flipper — The animated hand/lever element created using SVG.

div.egg — The 3D egg container.

.front — The front shell of the egg (with yolk inside).

.back — The cracked egg shell pieces.

The SVG is embedded once and reused using the element for performance and cleanliness.


🎨 CSS Code


1html {
2  box-sizing: border-box;
3  -webkit-font-smoothing: antialiased;
4}
5
6* {
7  box-sizing: inherit;
8}
9*:before,
10*:after {
11  box-sizing: inherit;
12}
13
14body {
15  min-height: 100vh;
16  display: flex;
17  justify-content: center;
18  align-items: center;
19  background: #252432;
20  overflow: hidden;
21}
22
23.egg-switch {
24  --background: #171827;
25  --shadow: rgba(246, 248, 255, 0.08);
26  --shadow-inner: rgba(13, 15, 24, 0.8);
27  --egg: #fff;
28  --egg-back: #f4d2ad;
29  --egg-yellow: linear-gradient(
30    135deg,
31    rgba(239, 202, 51, 1) 50%,
32    rgba(237, 139, 2, 1) 100%
33  );
34  --egg-shadow: rgba(13, 15, 24, 0.25);
35  --flipper: #f6f8ff;
36  --flipper-hand: #8a91b4;
37  --flipper-shadow: #646b8c;
38  perspective: 160px;
39  cursor: pointer;
40  -webkit-tap-highlight-color: transparent;
41}
42.egg-switch input {
43  display: none;
44}
45.egg-switch input + div {
46  width: 64px;
47  height: 32px;
48  border-radius: 16px;
49  position: relative;
50  background: var(--background);
51  box-shadow:
52    inset 0 1px 3px 0 var(--shadow-inner),
53    0 1px 0 0 var(--shadow);
54}
55.egg-switch input + div .egg {
56  position: absolute;
57  left: 4px;
58  top: 4px;
59  z-index: 1;
60  -webkit-animation: egg 2s linear forwards;
61  animation: egg 2s linear forwards;
62  transform-style: preserve-3d;
63}
64.egg-switch input + div .egg .front:before,
65.egg-switch input + div .egg .front:after,
66.egg-switch input + div .egg .back:before,
67.egg-switch input + div .egg .back:after {
68  content: "";
69}
70.egg-switch input + div .egg .front:before,
71.egg-switch input + div .egg .front:after,
72.egg-switch input + div .egg .back:before,
73.egg-switch input + div .egg .back:after,
74.egg-switch input + div .egg .back {
75  position: absolute;
76  border-radius: var(--border-radius, 50%);
77  width: var(--width, var(--size, 24px));
78  height: var(--height, var(--size, 24px));
79  left: var(--left, var(--spacing, 0));
80  top: var(--top, var(--spacing, 0));
81  background: var(--background, var(--egg));
82}
83.egg-switch input + div .egg .front {
84  width: 24px;
85  height: 24px;
86  transform: rotateY(180deg);
87  -webkit-backface-visibility: hidden;
88  backface-visibility: hidden;
89}
90.egg-switch input + div .egg .front:before {
91  --background: var(--egg);
92}
93.egg-switch input + div .egg .front:after {
94  --size: 12px;
95  --spacing: 6px;
96  --background: var(--egg-yellow);
97  transform: translateZ(0);
98  box-shadow: 1px 1px 3px var(--egg-shadow);
99}
100.egg-switch input + div .egg .back {
101  --background: none;
102}
103.egg-switch input + div .egg .back:before,
104.egg-switch input + div .egg .back:after {
105  --height: 14px;
106  --background: var(--egg-back);
107}
108.egg-switch input + div .egg .back:before {
109  --border-radius: 12px 12px 0 0;
110  -webkit-clip-path: polygon(
111    0 0,
112    100% 0,
113    100% 90%,
114    75% 100%,
115    50% 90%,
116    25% 100%,
117    0 80%
118  );
119  clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0 80%);
120}
121.egg-switch input + div .egg .back:after {
122  --border-radius: 0 0 12px 12px;
123  --top: 10px;
124  -webkit-clip-path: polygon(
125    0 0,
126    25% 20%,
127    50% 10%,
128    75% 20%,
129    100% 10%,
130    100% 100%,
131    0 100%
132  );
133  clip-path: polygon(
134    0 0,
135    25% 20%,
136    50% 10%,
137    75% 20%,
138    100% 10%,
139    100% 100%,
140    0 100%
141  );
142}
143.egg-switch input + div .flipper {
144  position: absolute;
145  display: flex;
146  align-items: center;
147  top: 7px;
148  left: 100%;
149  opacity: 0;
150  transform-origin: 20px 50%;
151  transform: translateX(60px) translateY(-32px) rotate(-30deg) scale(0.8);
152  -webkit-animation: flipper 2s linear;
153  animation: flipper 2s linear;
154}
155.egg-switch input + div .flipper:after {
156  content: "";
157  width: 20px;
158  height: 6px;
159  border-radius: 2px 1px 1px 2px;
160  display: block;
161  background: var(--flipper-hand);
162  box-shadow: inset 0 -1px 0 0 var(--flipper-shadow);
163}
164.egg-switch input + div .flipper svg {
165  width: 39px;
166  height: 18px;
167  display: block;
168  color: var(--flipper);
169}
170.egg-switch input:checked + div .flipper {
171  -webkit-animation: none;
172  animation: none;
173}
174.egg-switch input:checked + div .egg {
175  -webkit-animation: crack 2s linear forwards;
176  animation: crack 2s linear forwards;
177}
178.egg-switch input:checked + div .egg .front:before {
179  -webkit-animation: egg-white 0.8s linear forwards 1.4s;
180  animation: egg-white 0.8s linear forwards 1.4s;
181}
182.egg-switch input:checked + div .egg .back:before,
183.egg-switch input:checked + div .egg .back:after {
184  --animate-y: -16px;
185  transform: translateZ(-2px);
186  -webkit-animation: egg-crack 0.8s linear forwards 1.4s;
187  animation: egg-crack 0.8s linear forwards 1.4s;
188}
189.egg-switch input:checked + div .egg .back:after {
190  --animate-y: 16px;
191}
192
193@-webkit-keyframes egg {
194  0%,
195  40% {
196    transform: rotateY(180deg) translateX(-32px);
197  }
198  50% {
199    transform: rotateY(180deg) translateX(-33px);
200  }
201  75% {
202    transform: translateZ(32px);
203  }
204  90% {
205    transform: scaleX(0.9);
206  }
207  100% {
208    transform: scaleX(0.8);
209  }
210}
211
212@keyframes egg {
213  0%,
214  40% {
215    transform: rotateY(180deg) translateX(-32px);
216  }
217  50% {
218    transform: rotateY(180deg) translateX(-33px);
219  }
220  75% {
221    transform: translateZ(32px);
222  }
223  90% {
224    transform: scaleX(0.9);
225  }
226  100% {
227    transform: scaleX(0.8);
228  }
229}
230@-webkit-keyframes egg-white {
231  0% {
232    opacity: 0.4;
233    transform: scale(0.4);
234  }
235  60%,
236  100% {
237    transform: scale(1);
238  }
239  100% {
240    opacity: 1;
241  }
242}
243@keyframes egg-white {
244  0% {
245    opacity: 0.4;
246    transform: scale(0.4);
247  }
248  60%,
249  100% {
250    transform: scale(1);
251  }
252  100% {
253    opacity: 1;
254  }
255}
256@-webkit-keyframes egg-crack {
257  0% {
258    transform: translateZ(-2px);
259  }
260  70% {
261    transform: translateZ(-2px) scale(0.8) rotate(4deg)
262      translateY(var(--animate-y));
263  }
264  80% {
265    opacity: 1;
266  }
267  100% {
268    opacity: 0;
269    transform: translateZ(-2px) scale(0.8) rotate(8deg)
270      translateY(calc(var(--animate-y) * 1.5));
271  }
272}
273@keyframes egg-crack {
274  0% {
275    transform: translateZ(-2px);
276  }
277  70% {
278    transform: translateZ(-2px) scale(0.8) rotate(4deg)
279      translateY(var(--animate-y));
280  }
281  80% {
282    opacity: 1;
283  }
284  100% {
285    opacity: 0;
286    transform: translateZ(-2px) scale(0.8) rotate(8deg)
287      translateY(calc(var(--animate-y) * 1.5));
288  }
289}
290@-webkit-keyframes crack {
291  0% {
292    transform: rotateY(180deg) scaleX(0.8);
293  }
294  30% {
295    transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px)
296      translateZ(-24px) scaleX(0.8);
297  }
298  40% {
299    transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px)
300      scaleX(0.8);
301  }
302  60%,
303  80% {
304    transform: rotateY(180deg) translateX(-32px) scaleX(0.8);
305  }
306  100% {
307    transform: rotateY(180deg) translateX(-32px);
308  }
309}
310@keyframes crack {
311  0% {
312    transform: rotateY(180deg) scaleX(0.8);
313  }
314  30% {
315    transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px)
316      translateZ(-24px) scaleX(0.8);
317  }
318  40% {
319    transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px)
320      scaleX(0.8);
321  }
322  60%,
323  80% {
324    transform: rotateY(180deg) translateX(-32px) scaleX(0.8);
325  }
326  100% {
327    transform: rotateY(180deg) translateX(-32px);
328  }
329}
330@-webkit-keyframes flipper {
331  30% {
332    transform: translateX(-4px);
333  }
334  40% {
335    transform: translateX(-16px);
336  }
337  50% {
338    transform: translateX(-24px);
339  }
340  60% {
341    transform: translateX(-32px) rotateY(50deg) translateZ(16px);
342  }
343  70% {
344    transform: translateX(14px);
345  }
346  85%,
347  100% {
348    transform: translateX(60px);
349  }
350  15%,
351  80% {
352    opacity: 1;
353  }
354  95%,
355  100% {
356    opacity: 0;
357  }
358}
359@keyframes flipper {
360  30% {
361    transform: translateX(-4px);
362  }
363  40% {
364    transform: translateX(-16px);
365  }
366  50% {
367    transform: translateX(-24px);
368  }
369  60% {
370    transform: translateX(-32px) rotateY(50deg) translateZ(16px);
371  }
372  70% {
373    transform: translateX(14px);
374  }
375  85%,
376  100% {
377    transform: translateX(60px);
378  }
379  15%,
380  80% {
381    opacity: 1;
382  }
383  95%,
384  100% {
385    opacity: 0;
386  }
387}

🧬 Visual & Animation Techniques


CSS Variables
Used extensively for colors, shadows, sizes, and animation control.

Makes the design easy to theme or customize.

3D Perspective

perspective: 160px gives realistic depth.

transform-style: preserve-3d allows egg parts to exist in 3D space.

Egg Construction

The egg is entirely built using pseudo-elements.

Front side shows the yolk.

Back side splits into cracked shell pieces using clip-path.

Flipper Animation

SVG hand slides in, rotates in 3D, then exits.

Controlled by @keyframes flipper.

Crack Animation

When checked, the egg:

Rotates
Splits into top and bottom shells

Fades them out
Reveals the egg white smoothly


🧩 Keyframe Animations


1@keyframes egg {
2  0%, 40% {
3    transform: rotateY(180deg) translateX(-32px);
4  }
5  100% {
6    transform: scaleX(0.8);
7  }
8}
9
10@keyframes crack {
11  30% {
12    transform: rotateZ(-16deg) translateY(12px);
13  }
14  100% {
15    transform: rotateY(180deg) translateX(-32px);
16  }
17}
18
19@keyframes egg-crack {
20  70% {
21    transform: scale(0.8) translateY(var(--animate-y));
22  }
23  100% {
24    opacity: 0;
25  }
26}


Each animation is carefully timed to overlap and feel organic and physical, mimicking how a real egg cracks and breaks apart.


🎯 Interaction Logic (CSS Only)


This toggle works without JavaScript.

The checkbox state (:checked) controls everything.

CSS sibling selectors trigger animations.

Timing delays are handled with animation delays.

This approach is lightweight, performant, and highly scalable.

Toggling OFF resets the egg. Toggling ON plays the full cracking sequence.


📱 Responsiveness & Performance

Compact 64×32px size makes it ideal for UI switches.

No JavaScript = zero runtime overhead.

SVG reuse keeps DOM lightweight.

Works smoothly across modern browsers.


🚀 Use Cases


Fun settings toggle

Easter-themed UI

Creative portfolios

Experimental CSS showcases

Animation practice projects

Love this component?

Explore more components and build amazing UIs.

View All Components