10+ CSS Background Texture without Image

CSS Background Texture without Image
Code Snippet:CSS3 pattern background (no image)
Author: Jaetheme
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 831
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X