From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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!
Great work! Thank you a lot!
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!
Absolutely awesome! Thanks a lot!
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.
Wonderful 🙂 Thanks Mary for sharing this ^^
Wao!!! awesome. Would like to use into my website.
That’s some brilliant SVG art, Lou. 🙂
have I told you lately, that I love you?
MARY LOU, PLEASE: MARRY ME!
Great as always, Mary. The last will fit perfectly in my project, thank you!
Woaahhhh…. Excellent POST…. (y)
Manoela you ROCK! This is great, thank you.
This is really a great post, Mary, small things make the difference..!
Great stuff – thank you!
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.”
Awesome post, I like this so much~ Thank you!
Could anyone give me some explanation about “double colon”? I have never seen the case of using 2 colon for “before” and “after”. Thanks.
Never mind, I figured it out.
<3
Beautiful Mary, thank you!
By the way, any idea how I can reverse the bigTriangleColor svg? so it points at the top. Thanks in advance.
Sweet! I already used a big triangle in my design, using a background-image, but this is so much better 🙂
Great
Awesome! Really like the double diagonal, could not have though of that myself. Good stuff!
Beautiful!!!
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?
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 🙂
Nowis, use rgba() for Firefox
Great article.
Why not put the codes on github?
Thanks ! It works very well and all separators are beautiful. The hardest part was choosing which to use !
These are amazing! Best design on the web for sure!
Love these handy code snippets!
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?
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
Hi Mary.
How can i do this collection to work in IE9?
…sorry, my english is not so good…
Thank you.
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!
I was wondering if anybody has ever done this without a plugin on the X theme… it would be really interesting…