How can I create a wavy shape CSS?

by

I have an online generator for the below code: https://css-generators.com/wavy-shapes/

Here is an idea with radial-gradient and CSS variables where you can easily control the shape:

.wave {
  --c:red;   /* Color */
  --t:5px;   /* Thickness */
  --h:50px;  /* Height (vertical distance between two curve) */
  --w:120px; /* Width  */
  --p:13px;  /* adjust this to correct the position when changing the other values*/
  
  background:
    radial-gradient(farthest-side at 50% calc(100% + var(--p)), #0000 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    radial-gradient(farthest-side at 50% calc(0%   - var(--p)), #0000 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
    
  background-size: var(--w) var(--h);
  background-position: calc(var(--w)/2) calc(var(--h)/2),0px calc(var(--h)/2);
  
  
  border:1px solid;
  margin:5px 0;
  display:inline-block;
  width:300px;
  height:150px;
}
<div class="wave"></div>

<div class="wave" style="--w:200px;--h:40px;--p:10px; --t:8px;--c:purple"></div>

<div class="wave" style="--w:80px ;--h:20px;--p:5px;  --t:3px;--c:blue;"></div>

<div class="wave" style="--w:100px;--h:30px;--p:14px;--t:10px;--c:green;"></div>

Wavy shape CSS

Here is a Codepen to play with the code

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. Cut Corners using CSS
  3. Transparent half circle cut out of a div
  4. Can I create a div with a Curved bottom?
  5. How to create a circle with links on border side
  6. How to make this arrow in CSS only?
  7. Shape with a slanted side (responsive)
  8. CSS3 Transform Skew One Side
  9. How to make a curved edge hexagon by using CSS
  10. Responsive CSS Trapezoid Shape
  11. Circular percent progress bar
  12. Generate repeating hexagonal pattern with CSS3
  13. How to create a curve between two gradient using CSS?
  14. How does this CSS produce a circle?
  15. Hexagon shape with a border/outline
  16. How to draw a trapezium/trapezoid with css3?
  17. How to create a transparent triangle with border using CSS?
  18. How to bevel the corner of a block div?
  19. Dynamically aligning pseudo element according to parent height
  20. CSS Speech Bubble with Box Shadow
  21. Center Triangle at Bottom of Div
  22. CSS box shadow around a custom shape?
  23. Pixelated edge around a CSS Circle with overflow: hidden;
  24. Title with bottom border smaller than width
  25. div with triangle at the bottom with background image
  26. Responsive CSS Circles
  27. How to create a triangle in CSS3 using border-radius
  28. How to transform each side of a shape separately?
  29. How to create a ribbon shape in CSS
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment