Create Wiggly Boxes for Images in HTML & CSS: A Complete Guide

Want to make your website images stand out with a unique design? In this blog post, we show you how to create images inside wiggly boxes using HTML and CSS. With just a few lines of code, you can transform your standard image containers into fun, dynamic shapes that add character to your web pages. Let’s dive into the details!

📌 What You’ll Learn:

• How to use clip-path for wavy and jagged box shapes
• Styling images within wiggly boxes
• Customizing wave patterns for unique effects

HTML:

Create an HTML file and add the following code:

<img src="https://codewithubes.in/cloud/images/test-1.jpg" />
<img src="https://codewithubes.in/cloud/images/test-2.jpg" />

CSS:

Create a CSS file and add the following code:

img {
  --s: 20px;  /* control the size of the wave */
  --w: 350px; /* preferred image width */
  width: round(var(--w),4*var(--s));
  aspect-ratio: 1;
  padding: calc(3.5*var(--s));
  box-sizing: border-box;
  background: linear-gradient(#4ECDC4,#556270);
  border-radius: calc(4*var(--s));
  --_r:var(--s),#000;
  --_g:conic-gradient(#000 0 0) no-repeat 50%/;
  mask: 
    radial-gradient(var(--_r) 100%,#0000 calc(100% + 1px)) 
    0 0/calc(4*var(--s)) calc(4*var(--s)),
    var(--_g) calc(100% - 6*var(--s)) calc(100% - 6*var(--s)),
    var(--_g) calc(100% - 4*var(--s)) calc(100% - 4*var(--s)) subtract,
    radial-gradient(var(--_r) calc(100% - 1px),#0000) 
    var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s));
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  background: #F2E9E1;
}

Happy coding!