Custom Shape as BG

Design help General
1

Looking to achieve this as a background for my hero section

site_bg_test_3

Not sure whether to make it as an svg or is there a way I could make it directly in css?
My plan would be to make one and then layer them and add the box shadows to create the stepped look.

Any help would be great thanks!

2 
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3C4D70;}
</style>
<path class="st0" d="M512,707V163h1025v553.5c0,0-281.37-91.47-507.5-17C912.5,723.5,721.5,760.5,512,707z"/>
</svg>

Insert this code as embed and you are done. For more precise control use Adobe Illustrator to creat any shape, then you can save the object you created as SVG, in the save option choose “Save Code…” and paste this code in the embed element (webflow). Hope that’s help you

4

Just tried the export code way through illustrator, the shape worked great but adding a drop shadow in illustrator creates too much code for the editor, tried using a box shadow in the html editor and in the editor, neither seemed to work, any ideas?

5

Nevermind, figured out my problem, for anyone else that has this issue when exporting SVG code, use an SVG filter instead of creating your own dropshadow.

Dont worry about the position and blur of the shadow as you can play with it in the code editor using the stdDeviation for blur.

<feGaussianBlur in=“SourceAlpha” result=“blur” stdDeviation="8">

1 Like