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

From our sponsor: Supercharge your marketing across design, automations, analytics, and more, using our marketing smarts.

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::after {
	position: absolute;
	content: '';
	pointer-events: none;

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

.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;

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

.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::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" />

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!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.


Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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 🙂