{"id":373403,"date":"2022-09-26T06:13:30","date_gmt":"2022-09-26T13:13:30","guid":{"rendered":"https:\/\/css-tricks.com\/?p=373403"},"modified":"2024-03-29T06:04:16","modified_gmt":"2024-03-29T13:04:16","slug":"how-to-create-wavy-shapes-patterns-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-create-wavy-shapes-patterns-in-css\/","title":{"rendered":"How to Create Wavy Shapes & Patterns in CSS"},"content":{"rendered":"\n

The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius<\/code> and lots of magic numbers until we get something that feels kinda close. And that\u2019s before we even get into wavy patterns, which are more difficult.<\/p>\n\n\n\n

\u201cSVG it!\u201d you might say, and you are probably right that it\u2019s a better way to go. But we will see that CSS can make nice waves and the code for it doesn\u2019t have to be all crazy. And guess what? I have an online generator<\/a> to make it even more trivial!<\/p>\n\n\n\n\n\n\n\n

\n