Data URI Tileable Transparent Patterns

Inevitably while designing/developing we always end up using at least one data URI image for one thing or another, whether it be a subtle textural effect, a quick divider, or an icon, data URI patterns are very convenient. You can read more about the advantages of data URIs here.

Below are a collection of some of our favorite data URI transparent patterns. To get the code for a single pattern click on it, or view the complete css below..

We also included a fun, simple and lightweight JS codeTip experiment, which dynamically generates the css of each pattern when clicked. Jump to the auto codeTip snippet here.


key POINTS

  • 20 Transparent dataURI patterns ready for copy & paste
  • All patterns are transparent so you can set any background color you like.
  • Very simple and lightweight JS codeTip experiment - dynamically generating a the css of each pattern when clicked.
  • NOTE: JS codeTips require jQuery

the HTML

<div class="patterns">
	<p class="pattern01"></p>
	<p class="pattern02"></p>
	<p class="pattern03"></p>
	<p class="pattern04"></p>
	<p class="pattern05"></p>
	<p class="pattern06"></p>
	<p class="pattern07"></p>
	<p class="pattern08"></p>
	<p class="pattern09"></p>
	<p class="pattern10"></p>
	<p class="pattern11"></p>
	<p class="pattern12"></p>
	<p class="pattern13"></p>
	<p class="pattern14"></p>
	<p class="pattern15"></p>
	<p class="pattern16"></p>
	<p class="pattern17"></p>
	<p class="pattern18"></p>
	<p class="pattern19"></p>
	<p class="pattern20"></p>
</div>

the CSS

	
/* The Patterns ------- */
.pattern01{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADklEQVQIW2NgQAXGZHAAGioAza6+Hk0AAAAASUVORK5CYII=);}
.pattern02{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAADklEQVQIHWNgYGBoACMABIoBAUIssgcAAAAASUVORK5CYII=);}
.pattern03{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQIW2NgYGB4z4AAFUhsFAG4IsICMIBiLgBmEQcEyASpFQAAAABJRU5ErkJggg==);}
.pattern04{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAiCAMAAAAau2s5AAAAUVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////29vbt7e3l5eXd3d3W1tbPz8/JycnDw8O9vb24uLizs7Ourq56WfwvAAAAG3RSTlMAAQIDBAUGBwgJCgsMDRobHB0eHyAhIiMkJSbKd6MzAAACOUlEQVQYGQXBCWLaQAAEMGEwvnamCUkbsv9/aCX11zMsmakHd3vNg9xtHZPNZqjeGDZTrzzWyNfZwH7Wb6yH8+HLNxePUVM498dUhGNelVwM9bbgyuf4wZE90wwxVK0Z8GGuIxLVsNqP3nvbRFTzBN5eDEmqdrGb+UNizVQWRFNgTOXmGKbXFiHVU+QWTcd13dzSe+NApsKW0dThHO6meoB5zlhEqkcyDNVtFeOpR58RT6/bbyQj+1TA9JIzEvXOsRvWOaYIes0rN5K/Wy/H00o1MXaq15Y7mWZEYvrMEgk9X2A5ZwpyNJ/GDk0JoT72ZZccb8V1LeoHWJvaWPAxeu3rnqi3gN4bixFTA6gpMGYKkZ4vsJwzBTnMpW6nxOv8s1nXw1ElklEVgT67cfH41Qjn/koh/Mub5ES99uCuKkFe6UHcTLU8QdPllDiaGWLoWTwkL4UN1eAe9RmnWP/pQfBlusFl5sUj6PhNFoz6CDdMTW6Bt+K6Han3AdRPYgn1Afb4SBPQNFce45HpQ3DzuRZYzBRcx9u8QpZ0qYBf5bDbfedXOJy/Psk4nS9/8gx5TFMi+BpvVjY12W+Jf5qn7CNf999sBsztewzkMfXhDNdMbQ5MHQRmJol9bcqR8O2bYTe6zGNJgpqyC2/zLpHMVOSU+mfbsPpVN4atqSuPNebzR2D/0RHr4TQVJDNFxHy8jYj83EscO58mbu5rFZZ9+WvmuKDXe8GJv74Q8uUruBbNdAPdvk/iGv8Boocm/qEFnnUAAAAASUVORK5CYII=);}
.pattern05{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);}
.pattern06{background-image:url(data:image/png;base64,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);}
.pattern07{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNgYGCQwoKxgqGgcJA5h3yFAAs8BRWVSwooAAAAAElFTkSuQmCC);}
.pattern08{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAGovxNEIAAAAoSURBVDhPYxBEAgIMSkhAgcEFCTgwdCCBBoZRfaP6RvWN6hvVR5Y+APADQlQnmrINAAAAAElFTkSuQmCC);}
.pattern09{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAQAAADl0Z2xAAAAEElEQVQIHWNgYGD4b8UABgAJmgE6cUJg+wAAAABJRU5ErkJggg==);}
.pattern10{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAH0lEQVQIW2NggAABIFYAYgMgdsAqwIBNgAGbAAM2AQCXWQKBzohaMwAAAABJRU5ErkJggg==);}
.pattern11{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQY02P8//8/AzGAkSYKrQbO6sHuRgB90h5hFaCnewAAAABJRU5ErkJggg==);}
.pattern12{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYV2P4//+/FBbMgI4ZhohCbBhD81BQCAD6ay/4Sj20ZAAAAABJRU5ErkJggg==);}
.pattern13{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAQAAABwz0azAAAAWUlEQVQIHQXBsQqCUAAAwPuzaG/qB4SGNmkTanpDSqOJWJHkoqKFTUq/1x2Ft9ookzK627pp5Aw2IonWh6udIPMy0yulap0TF5Onr6MVBw+LwtqeoPJzFgt/XjsaLaIXlnAAAAAASUVORK5CYII=);}
.pattern14{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAQAAABKmM6bAAAAT0lEQVQIHQXB0Q2CMAAFwIttpSKhwhgvxER+cP/JuOMroNoN3cQh6OCDAovTG7AJ3YrLZuAPvMBlFqDhoeAHMGHVRBPDTAEBTwGIiqrhvAF2twQo3n7LWgAAAABJRU5ErkJggg==);}
.pattern15{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAOElEQVQoz2P4//8/AxCoMuAHalBahgGqQY2ABpiBsvTToEqkBhkGcj1NrAaS/SBDth8GPljhngYAzckotmfPdTsAAAAASUVORK5CYII=);}
.pattern16{background-image:url(data:image/png;base64,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);}
.pattern17{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHklEQVQY02P4//8/AzGYgfoKgcCKSDyQgDg3Uj14AC5PmfMX467AAAAAAElFTkSuQmCC);}
.pattern18{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVQIHWNggIBiEGUFxJUABisBJ85jLc8AAAAASUVORK5CYII=);}
.pattern19{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2P4//8/AxI2RuGAaBQOTADOAWEAjAwwnWPnCWYAAAAASUVORK5CYII=);}
.pattern20{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAklJREFUeNqEVtlqVEEQ7a7bk0UFF4y+KBiXV8Fn/9rv8MEvSAgoKEIiuMTMnem2KpwKZyo1Y8PhzvRSe53uOsZ4VUoZwKRYK2rZHL4uYa4n+xutV59Y0+EVFgb+V9o8SJAL31fch3E2/iiuyKDrb8MGFsqCefi+FYx7rnhIClzGpeKz4qefqRqu17CsBDdHsF6g4EDxBt85KOBwnSrO7b9QTHsiVCiUHfteKhaKZYiA75thzAvFPZMvSVLZi0oKzZgjxV0IGQTP0SCD7cwztnaQpZxc9s72PYICDhF7w+GeYdChUD4kJJo9WyNEeyQkFkYJnvs45HgP+h2TWZOeqVv66ZbiBq09KeM4eqj/8R8FLmctlAvZocDL9yqEIttbEF437FKSUGwLj+EbNV/dETZBDi9cyUgoY5Bn3GR26DsKoAePprDXvP5i8y2pqonqXkJp2toZ5h5TWLjX9sBhJyjjyWjleAspZgRZyQDjrSdWorS+grdfucFbsGQbSfawNkHYD8ho2D9Tt0skMwn134NHzAqubEFzy5D0iWU16ug5dOwiNKiEyuuBlmpo5JtoNMTRFt+C0Owe+KT4TYoip3FIe1BUIw9a4p/q973iHdxuiPUHuqB6YAZJSFISg2463pj1GGU34/sAc3PCVyUpFgmKN66LlvAPu+yYyAsuCH949F3hEpTiCbjfGukO5s5wxdbkOpAgbApFsuF1w4vjo+IvEv8LiV8SfdTkxRIfGJJcXtdnveMH3XgdVSXJWyuWaEneYreu8H8CDACRPfht+odEKwAAAABJRU5ErkJggg==);}

/* The Pattern Holder ------- */
body{padding:0;margin:0;}
.patterns {
	box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08) inset, 0 1px 0 rgba(0, 0, 0, 0.3) inset;
	background: #AB998F;
	background: -webkit-linear-gradient(left,#AB998F,#AB998F 33%,#3B424A 33%,#3B424A 66%,#717A75 66%,#717A75 100%);
	background: linear-gradient(to right,#AB998F,#AB998F 33%,#3B424A 33%,#3B424A 66%,#717A75 66%,#717A75 100%);}
.patterns p {
	margin: 0;
	padding:40px 30px;
	position:relative;}
.patterns p:before {
	background:rgba(0, 0, 0, 0.9);
	border-radius: 50%;
	display: block;
	cursor: pointer;
	text-align: center;
	height: 50px;
	width: 50px;
	content: "CODE";
	color: #fff;
	font: 10px/50px arial, sans-serif;}

/* Code Tips ------- */
.code-tip {
	color: #eee;
	padding:15px 25px;
	position: absolute;
	top: 20px;
	left: 110px;
	border-radius: 4px;
	background: rgba(0,0,0,.8);
	max-width:75%;}
.code-tip pre {
	margin:0;
	overflow:hidden;
	font:12px/20px Consolas,Monaco,Menlo,Consolas,"Courier New",monospace;}
.code-tip-close:before {
	top: -5px;
	right: -5px;
	width: 25px;
	height: 25px;
	background:#000;
	content: "+";
	cursor: pointer;
	position: absolute;
	font: 20px/23px arial, sans-serif;
	text-align: center;
	border-radius:50%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);}

the JS

(function($) {

	// when you click on a pattern
	$( '.patterns p' ).on( "click", function( event ) {		

		// remove any open code tips if there are any
		$( '.code-tip' ).remove();

		// get the class and background image of the pattern clicked
		var thisBG = $( this ).css('background-image');
		var thisClass = $( this ).attr( 'class' );

		// construct the "code-tip" & insert it
		var codeTipContent =  "." + thisClass + "{ \nbackground-image:" + thisBG  + "; \n}";			
		$( this ).append( "<span class='code-tip'><pre>" +  codeTipContent + "</pre><span class='code-tip-close'></span></span>" );

	});

	// when you click on the close icon
	$( document ).on( "click", ".code-tip-close", function( event ) {	
		$( '.code-tip' ).remove();
	});

})(jQuery);

additional RESOURCES


Download
You might also like
Fusion Wordpress Theme Dejavu Wordpress Theme Blue Retro Grunge Text Effect and Icons Myriad Wordpress Theme Watercolor Social Networking Icons Grunge Yellow Warning Striped Icon & Text Effect Elegance Wordpress Theme Image Masking and Sliding Transition Effect Matte White Square Check Mark Icon Glossy Silver Web 2.0 Icon Tutorial Yellow Road Sign Icons Echelon Wordpress Theme Adding Column Layout Shortcodes to Your WordPress Theme Adding Versatile Button Shortcodes to your WordPress Theme Method Wordpress Theme Create a Professional Coming Soon Landing Page PSD Template Crystal Clear Bubble Icons Grungy Rusted Carbon Fiber Text Effect Brushed Silver Reflective Text Effect Persuasion Wordpress Theme Glossy Black Button Icons 3D Transparent Glass Text Effect How to use Google Analytics Content Experiments Modular Wordpress Theme

2 comments on “Data URI Tileable Transparent Patterns

Leave a Reply to Puny_D Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>