A Collection of Separator Styles

A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind.

Section Separators

Today we’d like to share some separator styles with you. When you have several sections in one page, it’s nice to separate them with some kind of line or background. There are so many possibilities and we want to show you just some of them that could look nicely for some flat design. Most of the styles play with two main colors and sometimes a darker shade. But you can also imagine this with white and a color. The techniques used here vary between pseudo-element, gradients and SVG graphics. The SVGs are simply placed between the sections whereas the pseudo-elements are added by the use of classes on the respective sections. Note that we have an interplay between consecutive sections where we might have to adjust a previous section padding to look nice with the separator style of the following section.

SVG is used in the cases where we cannot simply use a pseudo-element that is nicely responsive, like the half circle shape. Repeated background gradients (as background images) allow for a continuous pattern.

And now, dig in, scroll and get inspired!

An example for a separator style using pseudo-elements is the following double diagonal representing a flat shadow:

section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

.ss-style-doublediagonal {
	z-index: 1;
	padding-top: 6em;
	background: #2072a7;
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
	top: 0;
	left: -25%;
	z-index: -1;
	width: 150%;
	height: 75%;
	background: inherit;
	transform: rotate(-2deg);
	transform-origin: 0 0;
}

.ss-style-doublediagonal::before {
	height: 50%;
	background: #116094;
	transform: rotate(-3deg);
	transform-origin: 3% 0;
}

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Another example is the inclined zig zag pattern (up and down) made with a linear gradient:

.ss-style-inczigzag::before,
.ss-style-inczigzag::after {
	left: 0;
	width: 100%;
	height: 50px;
	background-size: 100px 100%;
}

.ss-style-inczigzag::before {
	top: 0;
	background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%);
}

.ss-style-inczigzag::after {
	bottom: 0;
	background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%);
}

…or the folded corner that uses diagonal gradients to simulate the triangles:

.ss-style-foldedcorner::before,
.ss-style-foldedcorner::after {
	bottom: 0;
	width: 100px;
	height: 100px;
}

.ss-style-foldedcorner::before {
	right: 0;
	background-image: linear-gradient(-45deg, #3498db 50%, #37a2ea 50%);
}

.ss-style-foldedcorner::after {
	right: 100px;
	background-image: linear-gradient(-45deg, #236fa1 50%, transparent 50%);
}

For some styles we use SVG, like the big triangle:

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="M0 0 L50 100 L100 0 Z" />
</svg>

By setting preserveAspectRatio="none" and a width of 100%, we make the SVG graphic fluid to fit into the whole width without resizing its height.

Note that some of the gradients don’t work so nicely on Mobile Safari. Adding the old gradient notation helps a bit but does not result in the same style like when using the new gradient syntax.

The icon font used in this demo was created with the IcoMoon app (IcoMoon icons).

I hope you find these styles useful and inspiring!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 38

Comments are closed.
  1. This site has been such an inspiration for me over the years! If you ever come to Ireland I definitely owe you guys a few pints of Guinness! Slåinte!

  2. Sick writeup! I dig it. CSS3 is making graphic design near-obsolete while creating a whole new area of expertise. Graphic design, meet programming.

    • dude you obviously don’t know what graphic design is.

      CSS3 is just a tool, graphic design is about visual comunication.

  3. I love scrolling through a codrops demo….

    “I think I know how to do that.”

    “Oh, that’s cool.”

    “Hmm, clever. I see how they did that.”

    “What the…”

    “Is that real?”

    “Okay, now you’re just showing off.”

  4. Could anyone give me some explanation about “double colon”? I have never seen the case of using 2 colon for “before” and “after”. Thanks.

    • By the way, any idea how I can reverse the bigTriangleColor svg? so it points at the top. Thanks in advance.

  5. Sweet! I already used a big triangle in my design, using a background-image, but this is so much better 🙂

  6. Awesome! Really like the double diagonal, could not have though of that myself. Good stuff!

  7. Hello. Awesome as always! But I have question. How to add this separator before and after section? Like this:

    <div id="portfolio"> <section class="doublediagonal"> <h1>Portfolio</h1> </section> <!-- HERE CONTENT OF PORTFOLIO --> </div>

    Because I need this as title of section, only for h1. Nothing more. How do it?

  8. Hi !

    Thank’s you for this work ! So, i’ve question :
    On Mozilla Firefox, triangles have a small black borders … How i can delete there borders ?

    Sorry for my bad English, i’m French 🙂

  9. Thanks ! It works very well and all separators are beautiful. The hardest part was choosing which to use !

  10. Amazing! Got 1 question none the less, if I was to use the diagonal page break one, is there a way to pop a border around content underneath it? Obviously the left border would either be higher or shorter than the right border, how would i go about this?

  11. i used some of the separators but they are appearing black and not of the same color as the section background color.any help?
    and how do we produce the svg for the other separators.Please help i am a beginner

  12. Hi Mary.
    How can i do this collection to work in IE9?
    …sorry, my english is not so good…
    Thank you.

  13. Great tutorial! Thanks.

    Can anyone tell me how to get a path like the big half circle, but so that it curves down? I can’t seem to get an even curve downward no matter how I change up the values.

    Thanks for any info!

  14. I was wondering if anybody has ever done this without a plugin on the X theme… it would be really interesting…