.pattern1 { background: repeating-linear-gradient(45deg, #ddd, #ddd 10px, #bbb 10px, #bbb 20px); }
.pattern2 { background: repeating-linear-gradient(90deg, #ccc, #ccc 5px, transparent 5px, transparent 10px); }
.pattern3 { background: radial-gradient(circle, #444 10%, transparent 20%) 0 0 / 10px 10px; }
.pattern4 { background: linear-gradient(to right, rgba(0,0,0,0.2) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.2) 1px, transparent 1px); }
.pattern5 { background: repeating-linear-gradient(135deg, #333, #333 10px, #999 10px, #999 20px); }

.shape1 { clip-path: circle(50%); }
.shape2 { clip-path: none; }
.shape3 { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.shape4 { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.shape5 { clip-path: polygon(50% 15%, 85% 15%, 100% 40%, 50% 100%, 0% 40%, 15% 15%); }

.shadow1 { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); }
.shadow2 { box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); }
.shadow3 { box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); }

.text-shadow1 { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); }
.text-shadow2 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
.text-shadow3 { text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5); }