Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">

	<nav>
		
		<button id="primary-nav">
			
			<svg class="light-svg" viewBox="0 0 612 344" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
				<g stroke="none" stroke-width="1">
					<g fill-rule="nonzero" fill="#FFFFFF">
						<path d="M604.267,55.727 C608.524,55.727 612,52.083 612,47.994 L612,7.825 C612,3.569 608.717,0.092 604.267,0.092 L7.733,0.092 C3.477,0.092 0,3.736 0,7.825 L0,47.994 C0,52.25 3.283,55.727 7.733,55.727 L604.267,55.727 L604.267,55.727 Z" id="Shape"></path>
							<path d="M0,187.084 C0,191.34 3.283,194.817 7.733,194.817 L604.266,194.817 C608.522,194.817 611.999,191.172 611.999,187.084 L611.999,146.915 C611.999,142.631 608.716,139.182 604.266,139.182 L7.733,139.182 C3.477,139.182 0,142.827 0,146.915 L0,187.084 Z" id="Shape"></path>
							<path d="M0,326.175 C0,330.431 3.283,333.908 7.733,333.908 L604.266,333.908 C608.522,333.908 611.999,330.263 611.999,326.175 L611.999,286.006 C611.999,281.75 608.716,278.274 604.266,278.274 L7.733,278.274 C3.477,278.274 0,281.918 0,286.006 L0,326.175 Z" id="Shape"></path>
					</g>
				</g>
			</svg>

			<svg class="dark-svg" viewBox="0 0 612 344" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
				<g stroke="none" stroke-width="1">
					<g fill-rule="nonzero" fill="#000000">
						<path d="M604.267,55.727 C608.524,55.727 612,52.083 612,47.994 L612,7.825 C612,3.569 608.717,0.092 604.267,0.092 L7.733,0.092 C3.477,0.092 0,3.736 0,7.825 L0,47.994 C0,52.25 3.283,55.727 7.733,55.727 L604.267,55.727 L604.267,55.727 Z" id="Shape"></path>
							<path d="M0,187.084 C0,191.34 3.283,194.817 7.733,194.817 L604.266,194.817 C608.522,194.817 611.999,191.172 611.999,187.084 L611.999,146.915 C611.999,142.631 608.716,139.182 604.266,139.182 L7.733,139.182 C3.477,139.182 0,142.827 0,146.915 L0,187.084 Z" id="Shape"></path>
							<path d="M0,326.175 C0,330.431 3.283,333.908 7.733,333.908 L604.266,333.908 C608.522,333.908 611.999,330.263 611.999,326.175 L611.999,286.006 C611.999,281.75 608.716,278.274 604.266,278.274 L7.733,278.274 C3.477,278.274 0,281.918 0,286.006 L0,326.175 Z" id="Shape"></path>
					</g>
				</g>
			</svg>
			
		</button>
		
	</nav>
	
	<h2>CSS mix blend mode & SVG for dynamically colored, fixed UI navigation</h2>
	
	<p class="highlight"><strong>Scroll all the way up and down to see how this SVG button dynamically changes as the background image moves behind it from light to dark.<strong></h3>
	
	<p>This example <strong><a href="https://lara.dev/add-mix-blend-mode-to-svg-to-build-beautiful-dynamically-colored-ui-or-navigation/">includes</a> a replacement inline SVG in black as a fallback for the lack of support <code>mix-blend-mode</code> in Microsoft Edge & IE.</strong></p>

	<p>This background shows how this method is especially useful for a UI where the color behind the SVG button changes dramatically between light and dark. Mix blend mode solves for the problem of a lack of contrast from a button that uses only one color.</p>
	
	<p>Please like and share this example check the complete overview below for further detail. For a live example of this implementation in action check out the navigation at <a href="https://lara.dev">lara.dev</a> and scroll around the front page or any blog post.</p>

	<p><a role="button" href="https://lara.dev/add-mix-blend-mode-and-svg-to-build-beautiful-dynamically-colored-ui-or-navigation/">View Detailed Walkthrough</a></p>
	
</div>
            
          
!
            
              button {
	max-width: 50px;
	width: 100px;
	position: fixed;
	background: none;
	border: none;
	padding: 0;
	top: 30px;
	right: 40px;
	mix-blend-mode: difference;
}

svg {
	position: absolute;
	top: 0;
	right: 0;
}

/* ----- Browser Support ----- */

/* Display mix-blend-mode button for all browsers */
.light-svg {
	display: block;
}
.dark-svg {
	display: none;
}

/* Change button class (and SVG color) for IE and Edge only */
_:-ms-lang(x), .light-svg {
	display: none;
}
_:-ms-lang(x), .dark-svg {
	display: block;
}

/* ----- Unrelated ----- */

body {
	margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
}

.container {
	padding: 10px 40px;
	background-size: cover;
	margin: 0;
	
	/* Use a custom container to hold your mix-blend-mode button 
	instead of the <body> element due to a bug in Chrome 58+ */
	background: #20123e;
	background: -webkit-linear-gradient(to bottom, #fee8d4, #7bffc8, #3b5d9a, #3A1C71, #20123e 80%);
	background: linear-gradient(to bottom, #fee8d4, #7bffc8, #3b5d9a, #3A1C71, #20123e 80%);

	
	/* Set for demo purposes for scrolling only */
	min-height: 1800px;
}

.overview {
	border-radius: 10px;
	max-width: 900px;
	padding: 20px;
}

h2 {
	font-weight: 900;
	font-size: 2em;
}

p { 
	max-width: 1000px;
	font-weight: 100;
	font-size: 1.15em;
	line-height: 1.5em;
}

a {
	color: #000;
	font-weight: bold;
}

a[role="button"] {
	background: #ff3b42;
	color: #FFF;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 8px;
	text-transform: uppercase;
	margin: 10px 0 0 -5px;
	display: inline-block;
}

.highlight {
	background: rgba(217, 255, 102, 0.63);
	padding: 5px 10px;
	margin: 0 -10px;
	border-radius: 5px;
	font-size: 1.35em;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console