На главную

CSS-эффекты и графика

Слоистые волны и пики

Три-восемь наложенных волн или гор в общем градиенте — готовая обложка для hero-блока лендинга.

Слои

Превью

Слоистые волны

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 560" width="1440" height="560" preserveAspectRatio="none">
  <rect width="1440" height="560" fill="#0b1120"/>
  <path fill="#6366f1" d="M 0 261.96 C 12 260.99, 48 262.27, 72 256.15 C 96 250.03, 120 237.75, 144 225.23 C 168 212.7, 192 195.14, 216 181 C 240 166.85, 264 150.72, 288 140.36 C 312 130, 336 121.46, 360 118.84 C 384 116.22, 408 118.53, 432 124.65 C 456 130.77, 480 143.05, 504 155.57 C 528 168.1, 552 185.66, 576 199.8 C 600 213.95, 624 230.08, 648 240.44 C 672 250.8, 696 259.34, 720 261.96 C 744 264.58, 768 262.27, 792 256.15 C 816 250.03, 840 237.75, 864 225.23 C 888 212.7, 912 195.14, 936 181 C 960 166.85, 984 150.72, 1008 140.36 C 1032 130, 1056 121.46, 1080 118.84 C 1104 116.22, 1128 118.53, 1152 124.65 C 1176 130.77, 1200 143.05, 1224 155.57 C 1248 168.1, 1272 185.66, 1296 199.8 C 1320 213.95, 1344 230.08, 1368 240.44 C 1392 250.8, 1428 258.38, 1440 261.96 L 1440 560 L 0 560 Z"/>
  <path fill="#855fdb" d="M 0 324.28 C 12 318.29, 48 301.6, 72 288.34 C 96 275.08, 120 257.21, 144 244.72 C 168 232.24, 192 219.42, 216 213.44 C 240 207.46, 264 205.58, 288 208.85 C 312 212.12, 336 222.04, 360 233.06 C 384 244.08, 408 261.25, 432 274.96 C 456 288.67, 480 305.21, 504 315.32 C 528 325.43, 552 333.74, 576 335.61 C 600 337.48, 624 333.75, 648 326.52 C 672 319.29, 696 305.24, 720 292.23 C 744 279.22, 768 261.28, 792 248.47 C 816 235.65, 840 222.06, 864 215.32 C 888 208.58, 912 205.58, 936 208.01 C 960 210.43, 984 219.4, 1008 229.88 C 1032 240.36, 1056 257.18, 1080 270.9 C 1104 284.63, 1128 301.57, 1152 312.24 C 1176 322.92, 1200 332.21, 1224 334.93 C 1248 337.65, 1272 335.03, 1296 328.55 C 1320 322.07, 1344 308.74, 1368 296.03 C 1392 283.32, 1428 259.59, 1440 252.3 L 1440 560 L 0 560 Z"/>
  <path fill="#a857c5" d="M 0 330.05 C 12 325.19, 48 305.91, 72 300.87 C 96 295.84, 120 295.4, 144 299.84 C 168 304.29, 192 316.01, 216 327.52 C 240 339.03, 264 356.56, 288 368.9 C 312 381.24, 336 395.07, 360 401.55 C 384 408.03, 408 410.67, 432 407.78 C 456 404.89, 480 394.9, 504 384.2 C 528 373.51, 552 356.3, 576 343.6 C 600 330.9, 624 315.81, 648 307.99 C 672 300.17, 696 295.37, 720 296.67 C 744 297.96, 768 306.06, 792 315.77 C 816 325.49, 840 342.08, 864 354.95 C 888 367.81, 912 383.92, 936 392.96 C 960 402, 984 408.88, 1008 409.2 C 1032 409.52, 1056 403.45, 1080 394.87 C 1104 386.29, 1128 370.56, 1152 357.74 C 1176 344.91, 1200 328.04, 1224 317.92 C 1248 307.8, 1272 298.95, 1296 297.02 C 1320 295.09, 1344 299.04, 1368 306.35 C 1392 313.66, 1428 335.11, 1440 340.86 L 1440 560 L 0 560 Z"/>
  <path fill="#ca50af" d="M 0 480 C 12 475.82, 48 465.48, 72 454.93 C 96 444.37, 120 427.58, 144 416.65 C 168 405.71, 192 393.73, 216 389.32 C 240 384.91, 264 385.28, 288 390.18 C 312 395.07, 336 407.57, 360 418.69 C 384 429.8, 408 446.54, 432 456.86 C 456 467.18, 480 477.59, 504 480.61 C 528 483.62, 552 481.14, 576 474.95 C 600 468.76, 624 454.95, 648 443.46 C 672 431.97, 696 415.54, 720 406 C 744 396.46, 768 387.78, 792 386.21 C 816 384.63, 840 389.18, 864 396.56 C 888 403.95, 912 418.85, 936 430.54 C 960 442.23, 984 458.08, 1008 466.7 C 1032 475.31, 1056 482.12, 1080 482.23 C 1104 482.33, 1128 475.8, 1152 467.33 C 1176 458.86, 1200 443.11, 1224 431.4 C 1248 419.7, 1272 404.67, 1296 397.12 C 1320 389.56, 1344 384.73, 1368 386.1 C 1392 387.46, 1428 402.1, 1440 405.3 L 1440 560 L 0 560 Z"/>
  <path fill="#ec4899" d="M 0 551.8 C 12 547.5, 48 535.92, 72 526.02 C 96 516.12, 120 500.85, 144 492.39 C 168 483.94, 192 476.18, 216 475.31 C 240 474.43, 264 479.81, 288 487.15 C 312 494.48, 336 509.1, 360 519.33 C 384 529.56, 408 542.82, 432 548.52 C 456 554.22, 480 556.51, 504 553.55 C 528 550.59, 552 540.24, 576 530.77 C 600 521.29, 624 505.82, 648 496.7 C 672 487.58, 696 478.2, 720 476.05 C 744 473.89, 768 477.41, 792 483.79 C 816 490.16, 840 504.02, 864 514.31 C 888 524.59, 912 538.74, 936 545.47 C 960 552.2, 984 556.39, 1008 554.69 C 1032 552.99, 1056 544.17, 1080 535.27 C 1104 526.37, 1128 510.94, 1152 501.29 C 1176 491.65, 1200 480.8, 1224 477.41 C 1248 474.01, 1272 475.61, 1296 480.92 C 1320 486.24, 1344 499.12, 1368 509.3 C 1392 519.47, 1428 536.51, 1440 541.95 L 1440 560 L 0 560 Z"/>
</svg>

CSS: фон блока

.hero {
  min-height: 560px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 560' width='1440' height='560' preserveAspectRatio='none'%3E %3Crect width='1440' height='560' fill='%230b1120'/%3E %3Cpath fill='%236366f1' d='M 0 261.96 C 12 260.99, 48 262.27, 72 256.15 C 96 250.03, 120 237.75, 144 225.23 C 168 212.7, 192 195.14, 216 181 C 240 166.85, 264 150.72, 288 140.36 C 312 130, 336 121.46, 360 118.84 C 384 116.22, 408 118.53, 432 124.65 C 456 130.77, 480 143.05, 504 155.57 C 528 168.1, 552 185.66, 576 199.8 C 600 213.95, 624 230.08, 648 240.44 C 672 250.8, 696 259.34, 720 261.96 C 744 264.58, 768 262.27, 792 256.15 C 816 250.03, 840 237.75, 864 225.23 C 888 212.7, 912 195.14, 936 181 C 960 166.85, 984 150.72, 1008 140.36 C 1032 130, 1056 121.46, 1080 118.84 C 1104 116.22, 1128 118.53, 1152 124.65 C 1176 130.77, 1200 143.05, 1224 155.57 C 1248 168.1, 1272 185.66, 1296 199.8 C 1320 213.95, 1344 230.08, 1368 240.44 C 1392 250.8, 1428 258.38, 1440 261.96 L 1440 560 L 0 560 Z'/%3E %3Cpath fill='%23855fdb' d='M 0 324.28 C 12 318.29, 48 301.6, 72 288.34 C 96 275.08, 120 257.21, 144 244.72 C 168 232.24, 192 219.42, 216 213.44 C 240 207.46, 264 205.58, 288 208.85 C 312 212.12, 336 222.04, 360 233.06 C 384 244.08, 408 261.25, 432 274.96 C 456 288.67, 480 305.21, 504 315.32 C 528 325.43, 552 333.74, 576 335.61 C 600 337.48, 624 333.75, 648 326.52 C 672 319.29, 696 305.24, 720 292.23 C 744 279.22, 768 261.28, 792 248.47 C 816 235.65, 840 222.06, 864 215.32 C 888 208.58, 912 205.58, 936 208.01 C 960 210.43, 984 219.4, 1008 229.88 C 1032 240.36, 1056 257.18, 1080 270.9 C 1104 284.63, 1128 301.57, 1152 312.24 C 1176 322.92, 1200 332.21, 1224 334.93 C 1248 337.65, 1272 335.03, 1296 328.55 C 1320 322.07, 1344 308.74, 1368 296.03 C 1392 283.32, 1428 259.59, 1440 252.3 L 1440 560 L 0 560 Z'/%3E %3Cpath fill='%23a857c5' d='M 0 330.05 C 12 325.19, 48 305.91, 72 300.87 C 96 295.84, 120 295.4, 144 299.84 C 168 304.29, 192 316.01, 216 327.52 C 240 339.03, 264 356.56, 288 368.9 C 312 381.24, 336 395.07, 360 401.55 C 384 408.03, 408 410.67, 432 407.78 C 456 404.89, 480 394.9, 504 384.2 C 528 373.51, 552 356.3, 576 343.6 C 600 330.9, 624 315.81, 648 307.99 C 672 300.17, 696 295.37, 720 296.67 C 744 297.96, 768 306.06, 792 315.77 C 816 325.49, 840 342.08, 864 354.95 C 888 367.81, 912 383.92, 936 392.96 C 960 402, 984 408.88, 1008 409.2 C 1032 409.52, 1056 403.45, 1080 394.87 C 1104 386.29, 1128 370.56, 1152 357.74 C 1176 344.91, 1200 328.04, 1224 317.92 C 1248 307.8, 1272 298.95, 1296 297.02 C 1320 295.09, 1344 299.04, 1368 306.35 C 1392 313.66, 1428 335.11, 1440 340.86 L 1440 560 L 0 560 Z'/%3E %3Cpath fill='%23ca50af' d='M 0 480 C 12 475.82, 48 465.48, 72 454.93 C 96 444.37, 120 427.58, 144 416.65 C 168 405.71, 192 393.73, 216 389.32 C 240 384.91, 264 385.28, 288 390.18 C 312 395.07, 336 407.57, 360 418.69 C 384 429.8, 408 446.54, 432 456.86 C 456 467.18, 480 477.59, 504 480.61 C 528 483.62, 552 481.14, 576 474.95 C 600 468.76, 624 454.95, 648 443.46 C 672 431.97, 696 415.54, 720 406 C 744 396.46, 768 387.78, 792 386.21 C 816 384.63, 840 389.18, 864 396.56 C 888 403.95, 912 418.85, 936 430.54 C 960 442.23, 984 458.08, 1008 466.7 C 1032 475.31, 1056 482.12, 1080 482.23 C 1104 482.33, 1128 475.8, 1152 467.33 C 1176 458.86, 1200 443.11, 1224 431.4 C 1248 419.7, 1272 404.67, 1296 397.12 C 1320 389.56, 1344 384.73, 1368 386.1 C 1392 387.46, 1428 402.1, 1440 405.3 L 1440 560 L 0 560 Z'/%3E %3Cpath fill='%23ec4899' d='M 0 551.8 C 12 547.5, 48 535.92, 72 526.02 C 96 516.12, 120 500.85, 144 492.39 C 168 483.94, 192 476.18, 216 475.31 C 240 474.43, 264 479.81, 288 487.15 C 312 494.48, 336 509.1, 360 519.33 C 384 529.56, 408 542.82, 432 548.52 C 456 554.22, 480 556.51, 504 553.55 C 528 550.59, 552 540.24, 576 530.77 C 600 521.29, 624 505.82, 648 496.7 C 672 487.58, 696 478.2, 720 476.05 C 744 473.89, 768 477.41, 792 483.79 C 816 490.16, 840 504.02, 864 514.31 C 888 524.59, 912 538.74, 936 545.47 C 960 552.2, 984 556.39, 1008 554.69 C 1032 552.99, 1056 544.17, 1080 535.27 C 1104 526.37, 1128 510.94, 1152 501.29 C 1176 491.65, 1200 480.8, 1224 477.41 C 1248 474.01, 1272 475.61, 1296 480.92 C 1320 486.24, 1344 499.12, 1368 509.3 C 1392 519.47, 1428 536.51, 1440 541.95 L 1440 560 L 0 560 Z'/%3E %3C/svg%3E");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}