--- 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/making-complex-css-shapes-using-shape--mx2lk2uzh 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/making-complex-css-shapes-using-shape--mx2lk2uzh og:image: https://api.daily.dev/og/posts/mx2lk2UzH.png og:image:alt: Making Complex CSS Shapes Using shape() 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-Tricks](https://daily.dev/sources/css_tricks)** · [@afif](https://daily.dev/afif) · 7 min read · 82 upvotes · 3 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: ## Community discussion Top comments from developers on daily.dev. **@alexeyzerkalenkov** · 4 upvotes > Old good Bézier curves in CSS. Cool! **@jess6** · 0 upvotes > Cool! 😎 ## Similar posts on daily.dev - [A Generator for Fancy Frames](https://daily.dev/posts/a-generator-for-fancy-frames-omo5poblm) · CSS Tip · 19 upvotes · 0 comments - [Convert Complex SVG Shapes into CSS](https://daily.dev/posts/convert-complex-svg-shapes-into-css-vemvalkcb) · CSS Tip · 153 upvotes · 8 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/making-complex-css-shapes-using-shape--mx2lk2uzh) ```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":"TechArticle","headline":"Making Complex CSS Shapes Using shape()","url":"https://daily.dev/posts/making-complex-css-shapes-using-shape--mx2lk2uzh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/making-complex-css-shapes-using-shape--mx2lk2uzh"},"datePublished":"2026-04-02T14:00:36.672Z","dateModified":"2026-04-03T11:00:19.132Z","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...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/03/complex-css-shapes-shape-function.webp","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/03/complex-css-shapes-shape-function.webp","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Temani Afif","url":"https://daily.dev/afif","image":"https://avatars.githubusercontent.com/u/14073250?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":2740}},"commentCount":3,"discussionUrl":"https://daily.dev/posts/making-complex-css-shapes-using-shape--mx2lk2uzh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":82},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"css","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"Making Complex CSS Shapes Using shape()"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/making-complex-css-shapes-using-shape--mx2lk2uzh","comment":[{"@type":"Comment","text":"Old good Bézier curves in CSS. Cool!","datePublished":"2026-04-03T09:04:26.927Z","url":"https://daily.dev/posts/mx2lk2UzH#c-hXyPM7jxo","author":{"@type":"Person","name":"Alexey Zerkalenkov","url":"https://daily.dev/alexeyzerkalenkov","image":"https://lh3.googleusercontent.com/a/ACg8ocKQBwPwaHC4XrPy0rniDybogCxlwDp7QCLkbwsqNRQSFhqDIlIf=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Cool! 😎","datePublished":"2026-04-07T14:30:16.305Z","url":"https://daily.dev/posts/mx2lk2UzH#c-rPhfOVlq6","author":{"@type":"Person","name":"Jessica","url":"https://daily.dev/jess6","image":"https://avatars.githubusercontent.com/u/30345089?v=4"}}]} ```