{"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 \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\nborder-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