Advanced CSS Effects Skill

clip-path, masks, backdrop-filter, blend modes, CSS 3D, scroll-driven animations, @property, CSS Houdini.

clip-path

/* Basic shapes */
.diagonal    { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.circle      { clip-path: circle(50% at center); }
.inset       { clip-path: inset(10px 20px 10px 20px round 8px); }
.hexagon     { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

/* SVG path — use for organic shapes */
.blob { clip-path: path("M 100 0 C 180 0 200 80 160 120 ..."); }