A growing repository with 733 bundles & 10153 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.

CSS Breadcrumb tutorial

Created by Admin on Mar 17 2015

Nowadays with the new possibilities of CSS like transitions, transformations, gradients and so on, many things we used to do with a combination of code and images are now possible with bare code.

Recently I was looking for a way to create a series of breadcrumb buttons with arrows incorporated. I found many tutorials that explained me how to create small triangular arrows in one color using CSS-borders, but none that showed me how to create buttons with gradients that incorporated the arrow. I decided to code it myself. You can find the result below.

Step 1: Basic buttons.

Creating a series of buttons with gradients and shadows is fairly easy and straightforward. I’m using a combination of div’s and span’s, but you might as well use a list with list-items.

[code]* {

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

margin: 0;

padding: 0;

font-family: sans-serif;

font-size: 12px;


body {background-color: #d3d7cf;}

#breadcrumbs {

display: inline-block;

margin: 10px;

border-radius: 10px;

box-shadow:0 0 1px rgba(0,0,0,0.5);}

.button {

display: inline-block;

cursor: pointer;

margin-right: -3px;

box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25);

background-color: #729fcf;

background: -moz-linear-gradient(top, #729fcf, #3465a4);

background: -o-linear-gradient(top, #729fcf, #3465a4);

background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));


.button:hover {

background-color: #3465a4;

background: -moz-linear-gradient(bottom, #729fcf, #3465a4);

background: -o-linear-gradient(bottom, #729fcf, #3465a4);

background: -webkit-gradient(linear, left bottom, left top, from(#729fcf), to(#3465a4));

box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);}

.button:first-child {border-radius: 10px 0 0 10px;}

.button:last-child {border-radius: 0 10px 10px 0;}

.label {

text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;

color: white;

height: 30px;

padding: 8px;

-moz-user-select: none;

-webkit-user-select: none;

display: inline-block;


.button:hover .label {text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;}

.button:first-child .label {padding-left: 15px;}

.button:last-child .label {padding-right: 15px;}

.button:last-child .arrow {display: none;}

<div id=”breadcrumbs”>

<div class=”button”>

<span class=”label”>Start</span>


<div class=”button”>

<span class=”label”>Products</span>


<div class=”button”>

<span class=”label”>Colors</span>


<div class=”button”>

<span class=”label”>White</span>




Step 2: Creating the arrow

In order to create a triangular arrow with a gradient, we use CSS transformations and simple clipping.

First we create a span and rotate it 45deg. We apply the same gradients that we used in step 1, but with an angle of 135deg.

We encapsulate the rotated span in another one and adjust dimensions, overflow and margin so that only half of the rotated span is shown. This gives us the illusion of triangle with a gradient and shadow.

.arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;}

.arrow span {

border-radius: 5px;

width: 24px;height: 24px;

display: inline-block;

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform: rotate(45deg);

-ms-transform: rotate(45deg);

margin-left: -13px;

margin-top: 3px;

box-shadow: inset 1px 1px 0px rgba(255,255,255,0.25), 1px -1px 2px rgba(0,0,0,0.25);

background-color: #729fcf;

background: -moz-linear-gradient(135deg, #3465a4, #729fcf);

background: -o-linear-gradient(135deg, #3465a4, #729fcf);

background: -webkit-gradient(linear, right bottom, left top, from(#3465a4), to(#729fcf));


.arrow:hover span {

background-color: #3465a4;

background: -moz-linear-gradient(135deg, #729fcf, #3465a4);

background: -o-linear-gradient(135deg, #729fcf, #3465a4);

background: -webkit-gradient(linear, left top, right bottom, from(#3465a4), to(#729fcf));

box-shadow: -1px 1px 2px rgba(255,255,255,0.25), inset -1px 1px 1px rgba(0,0,0,0.25);


<span class=”arrow”><span></span></span>

Step 3: Bringing everything together

We place the arrow-span inside the button after the label and apply a few paddings and margins.

– Give .arrow a margin-left of -5px.

– Change .arrow:hover to .button:hover .arrow.

– Give .label a padding-left of 25px and .button a margin-right of -20px

– Give #breadcrumbs a padding-right of 18px.

Final Code


* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 12px;
body {background-color: #d3d7cf;}

width: 285px;
margin: 0 auto;
margin-top: 23%;

#breadcrumbs {
display: inline-block;
margin: 10px;
padding-right: 18px;
border-radius: 10px;
box-shadow:0 0 1px rgba(0,0,0,0.5);

.button {
display: inline-block;
cursor: pointer;
margin-right: -20px;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25);
background-color: #729fcf;
background: -moz-linear-gradient(top, #729fcf, #3465a4);
background: -o-linear-gradient(top, #729fcf, #3465a4);
background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
.button:hover {
background-color: #3465a4;
background: -moz-linear-gradient(bottom, #729fcf, #3465a4);
background: -o-linear-gradient(bottom, #729fcf, #3465a4);
background: -webkit-gradient(linear, left bottom, left top, from(#729fcf), to(#3465a4));
box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);}
.button:first-child {border-radius: 10px 0 0 10px;}
.button:last-child {border-radius: 0 10px 10px 0;}
.label {
text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
color: white;
height: 30px;
padding: 8px;
-moz-user-select: none;
-webkit-user-select: none;
display: inline-block;
padding-left: 25px;
.button:hover .label {text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;}
.button:first-child .label {padding-left: 15px;}
.button:last-child .label {padding-right: 15px;}
.button:last-child .arrow {display: none;}
.arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;margin-left: -5px;}
.arrow span {
border-radius: 5px;
width: 24px;height: 24px;
display: inline-block;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
margin-left: -13px;
margin-top: 3px;
box-shadow: inset 1px 1px 0px rgba(255,255,255,0.25), 1px -1px 2px rgba(0,0,0,0.25);
background-color: #729fcf;
background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
background: -o-linear-gradient(135deg, #3465a4, #729fcf);
background: -webkit-gradient(linear, right bottom, left top, from(#3465a4), to(#729fcf));
.button:hover .arrow span {
background-color: #3465a4;
background: -moz-linear-gradient(135deg, #729fcf, #3465a4);
background: -o-linear-gradient(135deg, #729fcf, #3465a4);
background: -webkit-gradient(linear, left top, right bottom, from(#3465a4), to(#729fcf));
box-shadow: -1px 1px 2px rgba(255,255,255,0.25), inset -1px 1px 1px rgba(0,0,0,0.25);


The result was achieved with trial and error and is not completely pixel perfect. Since you can’t use floating point pixels, the height of the arrow may or may not fit perfectly. If you want other dimensions, you’ll have to try it out. Nonetheless it think the result is quite allright.

You could also use skewing in CSS to make your arrow look less sharp.

Any comments or feedback are always welcome!

This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle

Add new bundle


Edit bundle