SVG as Section Separator

I saw something I am trying to emulate, to a degree. Right now I am using the exact asset, but I wanted to use different styles that I create myself using an SVG as a Section Separator.

How do you define the color of the SVG and make the other half transparent like a PNG?

Here is the example (Specifically the Drip look):
Scroll down to the “Drops” section.

Here is the way it is turning out on my page:
I won’t be using the same svg on the finished product, I just wanted to use Dan Fisher’s as a test to see if I could make it work.



It is already transparent by default. You just need to make the element’s background-color the same as the following element.

.drips-background {
	width: 100%;
	height: 0;
	background-image: url(;
	background-position: 50%;
	background-repeat: no-repeat;
	bottom: 0;
	background-color: #191F26; /* added this */

That was it. I don’t know why I didn’t try that before. I think I had created a background color for

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.