This code generates CSS background texture without using image. It employs various CSS techniques to create different patterns, like stripes, gradients, and dotted designs, for enhancing webpage design.
You can easily integrate these CSS3 patterns for a specific block or entire page. Create appealing backgrounds without image loading, reducing webpage load times. Achieve diverse designs, from stripes to gradients, and improve user experience.
How to Create CSS Background Texture without Using Image
1. First, include the necessary external resources for CSS normalization and prefixing in the <head> section of your HTML document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
2. Define the structure of your webpage using <div> elements. Each <div> represents a block that we’ll apply our CSS backgrounds to.
<div class="block block-stripes"><p>.block-stripes</div> <div class="block block-store"><p>.block-store</div> <div class="block block-demo"><p>.block-store</div> <div class="block block-gradiant"><p>.block-gradiant</div> <div class="block block-toright"><p>.block-toright</div> <div class="block block-dotted"><p>.block-dotted</div> <div class="block block-dotted-small"><p>.block-dotted-small</div> <div class="block block-scale"><p>.block-scale</div> <div class="block block-cadrillage"><p>.block-cadrillage</div> <div class="block block-crosshatch"><p>.block-crosshatch</div> <div class="block block-little-circle"><p>.block-little-circle</div>
2. Open your CSS file or include a <style> block in your HTML document’s <head>. To set a background for the entire page, target the <body> element.
.block {
width: 300px;
height: 300px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
padding: 25px;
display: inline-block;
}
.block p {
background-color: #fff;
color: #000;
padding: 4px;
font-size: 12px;
font-familly: Arial, sans-serif;
}
.block-stripes {
background-image: repeating-linear-gradient(-55deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.1) 5px, rgba(0, 0, 0, 0.1) 10px);
}
.block-store {
background-image: repeating-linear-gradient(180deg, #ccc, #bdbdbd, #969696 5%);
}
.block-demo {
background-color: #e5f4f7;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, #216b8a 25px, #2fb0e7 50px);
}
.block-gradiant {
background-image: linear-gradient(0deg, #34495e 7%, #16a085 100%);
}
.block-toright {
background-image: repeating-linear-gradient(to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px);
}
.block-dotted {
background: radial-gradient(circle, purple, purple 50%, #4b026f 50%, #4b026f);
background-size: 20px 20px;
}
.block-dotted-small {
background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
background-size: 3px 3px;
}
.block-scale {
color: white;
background: linear-gradient(45deg, #5d9634, #5d9634 10%, #538c2b 60%, #538c2b);
background-size: 20px 10px;
}
.block-cadrillage {
background-color: #269;
background-image: linear-gradient(rgba(255, 255, 255, 0.4), transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent 2px), linear-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.block-crosshatch {
background-color: #161616;
background-image: repeating-linear-gradient(135deg, #333, #333 10%, transparent 10%, transparent 50%), repeating-linear-gradient(-135deg, #333, #333 10%, transparent 10%, transparent 50%);
background-size: 12px 12px;
}
.block-little-circle {
background-color: #2c3e50;
background-image: repeating-radial-gradient(circle, #34495e, #34495e 45%, transparent 45%, transparent 60%, #34495e 60%, #34495e 100%);
background-size: 10px 10px;
}
Now, you can apply different textures to your blocks by assigning CSS classes to them. Here are some examples:
- Stripes:
.block-stripes - Gradient:
.block-gradiant - Dotted:
.block-dotted
If you want to apply the background texture to the entire webpage by targeting the <body> element in your CSS. Add the CSS code for the desired texture, as follows:
body {
background-image: repeating-linear-gradient(-55deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.1) 5px, rgba(0, 0, 0, 0.1) 10px);
/* Add other CSS properties for your background as needed */
}
That’s all! hopefully, you have successfully created CSS background Texture Without an Image. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
- Simple Invoice Template HTML CSS
- Testimonial Quotes Cloud in HTML CSS
- CSS Image Grid Different Sizes
- Table Background Image in HTML
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.