--- title: Making Complex CSS Shapes Using shape() | daily.dev description: The CSS shape() function enables creation of complex organic shapes like blobs, wavy dividers, and squiggly frames directly in CSS without SVG. The technique... canonical: https://daily.dev/posts/o3jsyv8ly twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Making Complex CSS Shapes Using shape() | daily.dev og:description: The CSS shape() function enables creation of complex organic shapes like blobs, wavy dividers, and squiggly frames directly in CSS without SVG. The technique... og:url: https://daily.dev/posts/o3jsyv8ly og:image: https://api.daily.dev/og/posts/o3jSyv8lY.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Making Complex CSS Shapes Using shape() **[CSS](https://daily.dev/sources/iheartcss)** · [@geoffgraham](https://daily.dev/geoffgraham) · 1 upvotes · 0 comments ## Summary The CSS shape() function enables creation of complex organic shapes like blobs, wavy dividers, and squiggly frames directly in CSS without SVG. The technique relies on chaining smooth curve commands where each shared point between adjacent curves is the midpoint of their control points. Generators are available for wavy dividers, blobs, and fancy frames. Shapes can be animated by interpolating between two shape() values with the same granularity, and scroll-driven animations are supported via animation-timeline: scroll(). The post walks through the mathematical logic behind smooth curve generation and showcases demos including animated wavy layouts, squishy buttons, and CSS loaders. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Random Wavy Dividers](https://daily.dev/posts/random-wavy-dividers-nezirgdbl) · CSS Tip · 3 upvotes · 1 comments - [Making interesting borders with CSS corner-shape](https://daily.dev/posts/making-interesting-borders-with-css-corner-shape-5iqa6xm15) · Cassidy's blog · 22 upvotes · 2 comments - [Get Ready For the Powerful CSS border-shape Property\!](https://daily.dev/posts/get-ready-for-the-powerful-css-border-shape-property--7ybzkqgpd) · CSS-Tricks · 131 upvotes · 12 comments - [How to create fancy corners using CSS corner-shape](https://daily.dev/posts/how-to-create-fancy-corners-using-css-corner-shape-t9hjg3jcn) · LogRocket · 0 upvotes · 0 comments - [Convert Complex SVG Shapes into CSS](https://daily.dev/posts/convert-complex-svg-shapes-into-css-vemvalkcb) · CSS Tip · 152 upvotes · 8 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/o3jsyv8ly) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/o3jsyv8ly","headline":"Making Complex CSS Shapes Using shape()","text":"Shared: Making Complex CSS Shapes Using shape()","url":"https://daily.dev/posts/o3jsyv8ly","datePublished":"2026-04-03T19:22:20.487Z","dateModified":"2026-04-03T19:22:20.489Z","author":{"@type":"Person","name":"Geoff","url":"https://daily.dev/geoffgraham","image":"https://media.daily.dev/image/upload/s--mXp5yqc7--/f_auto/v1746709785/avatars/avatar_JAehePvXH6nu6u9F4E9YV?_a=BAMClqUq0","description":"Certified Neat Freak","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":940}},"image":"https://media.daily.dev/image/upload/s--qPvKM23u--/f_auto/v1722860399/public/Placeholder%2009","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/mx2lk2UzH"},"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/iheartcss","name":"CSS"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS","item":"https://daily.dev/squads/iheartcss"},{"@type":"ListItem","position":3,"name":"Making Complex CSS Shapes Using shape()"}]} ```