Skip to main content

Waves

Create SVG wave background in section quick and easily.

Installation

Wave can add in top or bottom section, use this css waves-top-center or waves-bottom-center

Example code

            
              <figure class="waves-bottom-center text-primary z-index-n1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                  <path fill="currentColor" your path code .... ></path>
                </svg>
              </figure>

Dont forget to add position relative and z-index-1 in parent this code

            
              <div class="section bg-white z-index-1">
                <figure class="waves-bottom-center text-primary z-index-n1">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                    <path fill="currentColor" your path code .... ></path>
                  </svg>
                </figure>
              </div>


Generate Waves

We use tools from https://getwaves.io/ for generate wave background with fast and easy

Generate and copy svg code from here and editing svg code like this

This original wave svg code from Getwaves.io

            
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path fill="#0099ff" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
              </svg>

This code after editing

            
              <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
                <path fill="currentColor" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
              </svg>

Replace this code fill="#0099ff" with this class fill="currentColor" and after changes this code, add text color from Bootstrap like .text-primary or other color.

if svg images use stroke replace code with this code stroke="currentColor"


Want to add multi waves, you can use following example code

            
              <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
                <path class="opacity-20 translate-top-2" fill="currentColor" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
                <path class="opacity-30 translate-top-1" fill="currentColor" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
                <path fill="currentColor" fill-opacity="1" d="M0,0L48,48C96,96,192,192,288,197.3C384,203,480,117,576,101.3C672,85,768,139,864,160C960,181,1056,171,1152,154.7C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
              </svg>

Duplicate path code and add class="opacity-30 translate-top-1" and class="opacity-20 translate-top-2"

Opacity classes available from 1 to 90, example opacity 35 opacity-35

Translate top available from 1 to 5 translate-top-1 or for bottom translate-bottom-2


Single Waves

Your Content in here



Example Code
            
              <div id="hero" class="section pt-5 pt-md-7 pb-7 pb-md-9 bg-white z-index-1">
                <h2 class="text-center">Your Content in here</h2>
                <!-- waves start -->
                <figure class="waves-bottom-center z-index-n1">
                  <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
                    <path fill="currentColor" fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
                  </svg>
                </figure>
              </div>

Multi Waves

Your Content in here



Example Code
            
              <div id="hero" class="section pt-5 pt-md-7 pb-7 pb-md-9 bg-white z-index-1">
                <h2 class="text-center">Your Content in here</h2>
                <!-- waves start -->
                <figure class="waves-bottom-center z-index-n1">
                  <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
                    <path class="opacity-20 translate-top-2" fill="currentColor"  fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
                    <path class="opacity-30 translate-top-1" fill="currentColor"  fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
                    <path fill="currentColor" fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
                  </svg>
                </figure>
              </div>

Mix Waves

Your Content in here



Example Code
            
              <div id="hero" class="section pt-5 pt-md-7 pb-7 pb-md-9 bg-white z-index-1">
                <h2 class="text-center">Your Content in here</h2>
                <!-- waves start -->
                <figure class="waves-bottom-center z-index-n1">
                  <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" viewBox="0 0 1440 320">
                    <path class="opacity-30" fill="currentColor" fill-opacity="1" d="M0,192L48,165.3C96,139,192,85,288,90.7C384,96,480,160,576,186.7C672,213,768,203,864,186.7C960,171,1056,149,1152,144C1248,139,1344,149,1392,154.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
                    <path fill="currentColor" fill-opacity="1" d="M0,160L60,186.7C120,213,240,267,360,245.3C480,224,600,128,720,106.7C840,85,960,139,1080,149.3C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
                  </svg>
                </figure>
              </div>