Wave SVG Generator

Generate SVG wave dividers for website sections. Customize wave height, layers, colors, and complexity. Copy SVG or CSS code.

Wave Settings

Wave Height: 100px

Wave Frequency: 3

Layers: 3

Canvas Width: 1200px

Wave Style

Orientation

Layer Colors

Layer 1 Opacity

100%

Layer 2 Opacity

70%

Layer 3 Opacity

50%

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none">
  <path d="M0,100 L12,95.31546713535688 L24,90.79688618288304 L36,86.60433012552508 L48,82.88632235178278 L60,79.77457514062631 L72,77.37932368834952 L84.00000000000001,75.78542097178422 L96,75.0493317892932 L108,75.19713246713806 L120,76.22358709262116 L132,78.0923329989034 L144,80.73716893060526 L156,84.06440025628277 L168.00000000000003,87.95615814745712 L180,92.27457514062631 L192,96.8666691608924 L204.00000000000003,98.43023701176716 L216,93.78275282087863 L228,89.35551771087319 L240,85.30536869268818 L252,81.77578431446472 L264,78.89180186244963 L276,76.75558785279371 L288,75.44281873178278 L300,75 L312,75.44281873178278 L324,76.75558785279372 L336.00000000000006,78.89180186244963 L348,81.7757843144647 L360,85.30536869268816 L372,89.35551771087319 L384,93.78275282087864 L396,98.43023701176716 L408.00000000000006,96.86666916089237 L420,92.27457514062633 L432,87.9561581474571 L444,84.06440025628275 L456,80.73716893060528 L468,78.09233299890343 L480,76.22358709262116 L491.99999999999994,75.19713246713806 L504,75.0493317892932 L516,75.78542097178422 L528,77.3793236883495 L540,79.77457514062631 L552,82.8863223517828 L564,86.60433012552507 L576,90.79688618288301 L588,95.31546713535685 L600,99.99999999999999 L612,95.31546713535687 L624,90.79688618288303 L636,86.60433012552508 L648,82.88632235178277 L660,79.7745751406263 L672.0000000000001,77.3793236883495 L683.9999999999999,75.78542097178422 L696,75.0493317892932 L708,75.19713246713805 L720,76.22358709262116 L732,78.09233299890342 L744,80.73716893060529 L756,84.06440025628275 L768,87.95615814745713 L780,92.2745751406263 L792,96.8666691608924 L804,98.43023701176719 L816.0000000000001,93.78275282087858 L827.9999999999999,89.35551771087324 L840,85.30536869268818 L852,81.77578431446474 L864,78.89180186244961 L876,76.75558785279372 L888,75.44281873178278 L900,75 L912,75.44281873178278 L924,76.75558785279371 L936,78.8918018624496 L948,81.77578431446472 L960,85.30536869268816 L972.0000000000001,89.35551771087323 L983.9999999999999,93.78275282087857 L996,98.43023701176716 L1008,96.86666916089243 L1020,92.27457514062637 L1032,87.95615814745712 L1044,84.06440025628278 L1056,80.7371689306053 L1068,78.0923329989034 L1080,76.22358709262116 L1092,75.19713246713805 L1104,75.0493317892932 L1116,75.78542097178425 L1128,77.3793236883495 L1140,79.77457514062633 L1152,82.88632235178272 L1164,86.60433012552507 L1176,90.796886182883 L1188,95.3154671353569 L1200,99.99999999999999 L1200,100 L0,100 Z" fill="#3b82f6" fill-opacity="1" />
  <path d="M0,71.13248654051871 L12,68.52078765875063 L24,67.0242555679004 L36,66.69590566337139 L48,67.54736990422799 L60,69.54848474524664 L72,72.6283596955432 L84.00000000000001,76.67788864955449 L96,81.55361502522186 L108,87.0828137849299 L120,93.06961030607468 L132,99.30191933722142 L144,94.44104177612995 L156,88.3809317559395 L168.00000000000003,82.73243302089567 L180,77.69564645470474 L192,73.4490027325268 L204.00000000000003,70.14294132535291 L216,67.89458110674474 L228,66.78357135834986 L240,66.8492701543909 L252,68.08935008226442 L264,70.45988069229284 L276,73.87688475580535 L288,78.2193132003298 L300,83.33333333333331 L312,89.03777844204723 L324,95.13056571458628 L336.00000000000006,98.60414487569335 L348,92.38830432964485 L360,86.44211189747334 L372,80.97621441051893 L384,76.18424401223989 L396,72.23595864299669 L408.00000000000006,69.27122828038331 L420,67.39507997553983 L432,66.67397721750515 L444,67.13346543098316 L456,68.75726701693694 L468,71.48785799464977 L480,75.2285058174202 L491.99999999999994,79.84669617125415 L504,85.17882736050242 L516,91.03600597949116 L528,97.21073855558947 L540,96.51571789107821 L552,90.36560676851758 L564,84.55679882933795 L576,79.29507399072303 L588,74.76683147827481 L600,71.13248654051871 L612,68.52078765875063 L624,67.02425556790038 L636,66.69590566337139 L648,67.547369904228 L660,69.54848474524667 L672.0000000000001,72.62835969554322 L683.9999999999999,76.67788864955449 L696,81.55361502522183 L708,87.08281378492988 L720,93.0696103060747 L732,99.30191933722146 L744,94.44104177612988 L756,88.38093175593949 L768,82.73243302089563 L780,77.69564645470473 L792,73.44900273252678 L804,70.14294132535292 L816.0000000000001,67.89458110674471 L827.9999999999999,66.78357135834986 L840,66.8492701543909 L852,68.08935008226442 L864,70.45988069229287 L876,73.87688475580535 L888,78.21931320032985 L900,83.33333333333334 L912,89.0377784420472 L924,95.13056571458627 L936,98.6041448756934 L948,92.38830432964478 L960,86.44211189747338 L972.0000000000001,80.97621441051893 L983.9999999999999,76.18424401223999 L996,72.2359586429967 L1008,69.27122828038335 L1020,67.39507997553984 L1032,66.67397721750515 L1044,67.13346543098316 L1056,68.75726701693691 L1068,71.48785799464977 L1080,75.22850581742016 L1092,79.8466961712542 L1104,85.17882736050241 L1116,91.03600597949121 L1128,97.2107385555894 L1140,96.51571789107822 L1152,90.36560676851776 L1164,84.556798829338 L1176,79.29507399072308 L1188,74.76683147827481 L1200,71.13248654051876 L1200,100 L0,100 Z" fill="#6366f1" fill-opacity="0.7" />
  <path d="M0,63.91560817564839 L12,68.45853934784347 L24,74.11884248840373 L36,80.69599853667242 L48,87.95700846064702 L60,95.64464736384777 L72,96.51342319448688 L84.00000000000001,88.79500747436394 L96,81.47353420062804 L108,74.80837021406772 L120,69.03563227177526 L132,64.35982249331224 L144,60.946583771171206 L156,58.91683178872896 L168.00000000000003,58.34247152188144 L180,59.24384996942476 L192,61.58903535047915 L204.00000000000003,65.29494830374588 L216,70.23030501529985 L228,76.22026801314865 L240,83.05263987184162 L252,90.485380412056 L264,98.25518109461663 L276,93.91320714323287 L288,86.29722305255909 L300,79.1666666666667 L312,72.77414150041227 L324,67.34610594475666 L336.00000000000006,63.074850865366066 L348,60.11168760283055 L360,58.56158769298862 L372,58.47946419793732 L384,59.86822638343092 L396,62.678676656691124 L408.00000000000006,66.8112534156585 L420,72.11955806838088 L432,78.41554127611957 L444,85.47616469492438 L456,93.05130222016238 L468,99.12739917152686 L480,91.3370128825934 L491.99999999999994,83.85351723116246 L504,76.94201878152738 L516,70.84736081194313 L528,65.78544961942904 L540,61.935605931558314 L552,59.434212380285 L564,58.36988207921424 L576,58.78031945987547 L588,60.650984573438265 L600,63.91560817564837 L612,68.45853934784347 L624,74.11884248840374 L636,80.6959985366724 L648,87.95700846064702 L660,95.6446473638478 L672.0000000000001,96.51342319448688 L683.9999999999999,88.79500747436398 L696,81.47353420062811 L708,74.80837021406778 L720,69.03563227177527 L732,64.35982249331224 L744,60.946583771171184 L756,58.91683178872897 L768,58.34247152188144 L780,59.24384996942476 L792,61.589035350479136 L804,65.29494830374583 L816.0000000000001,70.23030501529989 L827.9999999999999,76.22026801314856 L840,83.05263987184162 L852,90.48538041205592 L864,98.25518109461669 L876,93.91320714323288 L888,86.29722305255903 L900,79.16666666666671 L912,72.77414150041236 L924,67.34610594475667 L936,63.07485086536607 L948,60.111687602830514 L960,58.56158769298861 L972.0000000000001,58.47946419793733 L983.9999999999999,59.868226383430894 L996,62.67867665669115 L1008,66.81125341565848 L1020,72.11955806838087 L1032,78.41554127611963 L1044,85.47616469492436 L1056,93.05130222016237 L1068,99.12739917152673 L1080,91.33701288259334 L1092,83.85351723116227 L1104,76.94201878152727 L1116,70.84736081194298 L1128,65.78544961942902 L1140,61.935605931558264 L1152,59.43421238028501 L1164,58.369882079214236 L1176,58.780319459875486 L1188,60.650984573438315 L1200,63.9156081756484 L1200,100 L0,100 Z" fill="#8b5cf6" fill-opacity="0.5" />
</svg>

CSS Background

background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20100%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M0%2C100%20L12%2C95.31546713535688%20L24%2C90.79688618288304%20L36%2C86.60433012552508%20L48%2C82.88632235178278%20L60%2C79.77457514062631%20L72%2C77.37932368834952%20L84.00000000000001%2C75.78542097178422%20L96%2C75.0493317892932%20L108%2C75.19713246713806%20L120%2C76.22358709262116%20L132%2C78.0923329989034%20L144%2C80.73716893060526%20L156%2C84.06440025628277%20L168.00000000000003%2C87.95615814745712%20L180%2C92.27457514062631%20L192%2C96.8666691608924%20L204.00000000000003%2C98.43023701176716%20L216%2C93.78275282087863%20L228%2C89.35551771087319%20L240%2C85.30536869268818%20L252%2C81.77578431446472%20L264%2C78.89180186244963%20L276%2C76.75558785279371%20L288%2C75.44281873178278%20L300%2C75%20L312%2C75.44281873178278%20L324%2C76.75558785279372%20L336.00000000000006%2C78.89180186244963%20L348%2C81.7757843144647%20L360%2C85.30536869268816%20L372%2C89.35551771087319%20L384%2C93.78275282087864%20L396%2C98.43023701176716%20L408.00000000000006%2C96.86666916089237%20L420%2C92.27457514062633%20L432%2C87.9561581474571%20L444%2C84.06440025628275%20L456%2C80.73716893060528%20L468%2C78.09233299890343%20L480%2C76.22358709262116%20L491.99999999999994%2C75.19713246713806%20L504%2C75.0493317892932%20L516%2C75.78542097178422%20L528%2C77.3793236883495%20L540%2C79.77457514062631%20L552%2C82.8863223517828%20L564%2C86.60433012552507%20L576%2C90.79688618288301%20L588%2C95.31546713535685%20L600%2C99.99999999999999%20L612%2C95.31546713535687%20L624%2C90.79688618288303%20L636%2C86.60433012552508%20L648%2C82.88632235178277%20L660%2C79.7745751406263%20L672.0000000000001%2C77.3793236883495%20L683.9999999999999%2C75.78542097178422%20L696%2C75.0493317892932%20L708%2C75.19713246713805%20L720%2C76.22358709262116%20L732%2C78.09233299890342%20L744%2C80.73716893060529%20L756%2C84.06440025628275%20L768%2C87.95615814745713%20L780%2C92.2745751406263%20L792%2C96.8666691608924%20L804%2C98.43023701176719%20L816.0000000000001%2C93.78275282087858%20L827.9999999999999%2C89.35551771087324%20L840%2C85.30536869268818%20L852%2C81.77578431446474%20L864%2C78.89180186244961%20L876%2C76.75558785279372%20L888%2C75.44281873178278%20L900%2C75%20L912%2C75.44281873178278%20L924%2C76.75558785279371%20L936%2C78.8918018624496%20L948%2C81.77578431446472%20L960%2C85.30536869268816%20L972.0000000000001%2C89.35551771087323%20L983.9999999999999%2C93.78275282087857%20L996%2C98.43023701176716%20L1008%2C96.86666916089243%20L1020%2C92.27457514062637%20L1032%2C87.95615814745712%20L1044%2C84.06440025628278%20L1056%2C80.7371689306053%20L1068%2C78.0923329989034%20L1080%2C76.22358709262116%20L1092%2C75.19713246713805%20L1104%2C75.0493317892932%20L1116%2C75.78542097178425%20L1128%2C77.3793236883495%20L1140%2C79.77457514062633%20L1152%2C82.88632235178272%20L1164%2C86.60433012552507%20L1176%2C90.796886182883%20L1188%2C95.3154671353569%20L1200%2C99.99999999999999%20L1200%2C100%20L0%2C100%20Z%22%20fill%3D%22%233b82f6%22%20fill-opacity%3D%221%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%2C71.13248654051871%20L12%2C68.52078765875063%20L24%2C67.0242555679004%20L36%2C66.69590566337139%20L48%2C67.54736990422799%20L60%2C69.54848474524664%20L72%2C72.6283596955432%20L84.00000000000001%2C76.67788864955449%20L96%2C81.55361502522186%20L108%2C87.0828137849299%20L120%2C93.06961030607468%20L132%2C99.30191933722142%20L144%2C94.44104177612995%20L156%2C88.3809317559395%20L168.00000000000003%2C82.73243302089567%20L180%2C77.69564645470474%20L192%2C73.4490027325268%20L204.00000000000003%2C70.14294132535291%20L216%2C67.89458110674474%20L228%2C66.78357135834986%20L240%2C66.8492701543909%20L252%2C68.08935008226442%20L264%2C70.45988069229284%20L276%2C73.87688475580535%20L288%2C78.2193132003298%20L300%2C83.33333333333331%20L312%2C89.03777844204723%20L324%2C95.13056571458628%20L336.00000000000006%2C98.60414487569335%20L348%2C92.38830432964485%20L360%2C86.44211189747334%20L372%2C80.97621441051893%20L384%2C76.18424401223989%20L396%2C72.23595864299669%20L408.00000000000006%2C69.27122828038331%20L420%2C67.39507997553983%20L432%2C66.67397721750515%20L444%2C67.13346543098316%20L456%2C68.75726701693694%20L468%2C71.48785799464977%20L480%2C75.2285058174202%20L491.99999999999994%2C79.84669617125415%20L504%2C85.17882736050242%20L516%2C91.03600597949116%20L528%2C97.21073855558947%20L540%2C96.51571789107821%20L552%2C90.36560676851758%20L564%2C84.55679882933795%20L576%2C79.29507399072303%20L588%2C74.76683147827481%20L600%2C71.13248654051871%20L612%2C68.52078765875063%20L624%2C67.02425556790038%20L636%2C66.69590566337139%20L648%2C67.547369904228%20L660%2C69.54848474524667%20L672.0000000000001%2C72.62835969554322%20L683.9999999999999%2C76.67788864955449%20L696%2C81.55361502522183%20L708%2C87.08281378492988%20L720%2C93.0696103060747%20L732%2C99.30191933722146%20L744%2C94.44104177612988%20L756%2C88.38093175593949%20L768%2C82.73243302089563%20L780%2C77.69564645470473%20L792%2C73.44900273252678%20L804%2C70.14294132535292%20L816.0000000000001%2C67.89458110674471%20L827.9999999999999%2C66.78357135834986%20L840%2C66.8492701543909%20L852%2C68.08935008226442%20L864%2C70.45988069229287%20L876%2C73.87688475580535%20L888%2C78.21931320032985%20L900%2C83.33333333333334%20L912%2C89.0377784420472%20L924%2C95.13056571458627%20L936%2C98.6041448756934%20L948%2C92.38830432964478%20L960%2C86.44211189747338%20L972.0000000000001%2C80.97621441051893%20L983.9999999999999%2C76.18424401223999%20L996%2C72.2359586429967%20L1008%2C69.27122828038335%20L1020%2C67.39507997553984%20L1032%2C66.67397721750515%20L1044%2C67.13346543098316%20L1056%2C68.75726701693691%20L1068%2C71.48785799464977%20L1080%2C75.22850581742016%20L1092%2C79.8466961712542%20L1104%2C85.17882736050241%20L1116%2C91.03600597949121%20L1128%2C97.2107385555894%20L1140%2C96.51571789107822%20L1152%2C90.36560676851776%20L1164%2C84.556798829338%20L1176%2C79.29507399072308%20L1188%2C74.76683147827481%20L1200%2C71.13248654051876%20L1200%2C100%20L0%2C100%20Z%22%20fill%3D%22%236366f1%22%20fill-opacity%3D%220.7%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%2C63.91560817564839%20L12%2C68.45853934784347%20L24%2C74.11884248840373%20L36%2C80.69599853667242%20L48%2C87.95700846064702%20L60%2C95.64464736384777%20L72%2C96.51342319448688%20L84.00000000000001%2C88.79500747436394%20L96%2C81.47353420062804%20L108%2C74.80837021406772%20L120%2C69.03563227177526%20L132%2C64.35982249331224%20L144%2C60.946583771171206%20L156%2C58.91683178872896%20L168.00000000000003%2C58.34247152188144%20L180%2C59.24384996942476%20L192%2C61.58903535047915%20L204.00000000000003%2C65.29494830374588%20L216%2C70.23030501529985%20L228%2C76.22026801314865%20L240%2C83.05263987184162%20L252%2C90.485380412056%20L264%2C98.25518109461663%20L276%2C93.91320714323287%20L288%2C86.29722305255909%20L300%2C79.1666666666667%20L312%2C72.77414150041227%20L324%2C67.34610594475666%20L336.00000000000006%2C63.074850865366066%20L348%2C60.11168760283055%20L360%2C58.56158769298862%20L372%2C58.47946419793732%20L384%2C59.86822638343092%20L396%2C62.678676656691124%20L408.00000000000006%2C66.8112534156585%20L420%2C72.11955806838088%20L432%2C78.41554127611957%20L444%2C85.47616469492438%20L456%2C93.05130222016238%20L468%2C99.12739917152686%20L480%2C91.3370128825934%20L491.99999999999994%2C83.85351723116246%20L504%2C76.94201878152738%20L516%2C70.84736081194313%20L528%2C65.78544961942904%20L540%2C61.935605931558314%20L552%2C59.434212380285%20L564%2C58.36988207921424%20L576%2C58.78031945987547%20L588%2C60.650984573438265%20L600%2C63.91560817564837%20L612%2C68.45853934784347%20L624%2C74.11884248840374%20L636%2C80.6959985366724%20L648%2C87.95700846064702%20L660%2C95.6446473638478%20L672.0000000000001%2C96.51342319448688%20L683.9999999999999%2C88.79500747436398%20L696%2C81.47353420062811%20L708%2C74.80837021406778%20L720%2C69.03563227177527%20L732%2C64.35982249331224%20L744%2C60.946583771171184%20L756%2C58.91683178872897%20L768%2C58.34247152188144%20L780%2C59.24384996942476%20L792%2C61.589035350479136%20L804%2C65.29494830374583%20L816.0000000000001%2C70.23030501529989%20L827.9999999999999%2C76.22026801314856%20L840%2C83.05263987184162%20L852%2C90.48538041205592%20L864%2C98.25518109461669%20L876%2C93.91320714323288%20L888%2C86.29722305255903%20L900%2C79.16666666666671%20L912%2C72.77414150041236%20L924%2C67.34610594475667%20L936%2C63.07485086536607%20L948%2C60.111687602830514%20L960%2C58.56158769298861%20L972.0000000000001%2C58.47946419793733%20L983.9999999999999%2C59.868226383430894%20L996%2C62.67867665669115%20L1008%2C66.81125341565848%20L1020%2C72.11955806838087%20L1032%2C78.41554127611963%20L1044%2C85.47616469492436%20L1056%2C93.05130222016237%20L1068%2C99.12739917152673%20L1080%2C91.33701288259334%20L1092%2C83.85351723116227%20L1104%2C76.94201878152727%20L1116%2C70.84736081194298%20L1128%2C65.78544961942902%20L1140%2C61.935605931558264%20L1152%2C59.43421238028501%20L1164%2C58.369882079214236%20L1176%2C58.780319459875486%20L1188%2C60.650984573438315%20L1200%2C63.9156081756484%20L1200%2C100%20L0%2C100%20Z%22%20fill%3D%22%238b5cf6%22%20fill-opacity%3D%220.5%22%20%2F%3E%0A%3C%2Fsvg%3E");
background-size: 100% auto;
background-repeat: no-repeat;
background-position: bottom;

Related Tools

🎨

Color Picker

Pick colors, convert HEX/RGB/HSL

Design

🌈

CSS Gradient Generator

Create CSS gradients visually

Design

⊟

Aspect Ratio Calculator

Calculate & scale aspect ratios

Design

⭐

Favicon Generator

Generate favicons from text/emoji

Design