Background Pattern Display

INFORMATION & CODE

Background Pattern Display

How the Code work

The code works by layering two main container elements: a background pattern display box (.patterns) and a text overlay (.text-cover). The .patterns container holds five child elements—two rectangular geometric blocks styled with complex, multi-browser compatible radial gradients (.part1 and .part2) and three circular elements with soft gradient fills (.circle1, .circle2, and .circle3). Positioned directly above this background is the .text-cover layer, which contains a label, a heading, a descriptive paragraph, a styled button, and a hyperlink. The CSS applies a grayscale filter to the text cover layer and organizes the layout using absolute positioning, flex/grid-like offsets, and responsive breakpoints (@media) to adjust element positioning and font sizes dynamically on smaller screens.

What the Code Does

Essentially, this code creates an aesthetically pleasing, modern card or hero section layout that combines complex CSS- generated background textures with standard typography and interactive elements like buttons and links. It serves as a visual UI component designed to catch user attention with custom shapes and patterns.

How to Use the Code

To use this code, simply copy the HTML markup and paste it directly into the <body> section of an HTML document. Then, take the CSS code, wrap it inside a <style> tag in the <head> section of your document (or place it into an external .css file linked to your HTML), and open the file in any standard web browser. You can customize the placeholder text, change the color values in the CSS gradients to match your branding, or adjust the absolute positioning values to fit your specific web design layout.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Pattern Display</title>
  </head>
  <body>
    <div class="patterns">
      <div class="part1"></div>
      <div class="part2"></div>
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
    </div>
    <div class="text-cover">
      <label>Here is a Label</label>
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <button class="fake_btn">Download</button>
      <a href="#">Learn More</a>
    </div>
  </body>
</html>

CSS


                .patterns {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translatex(-50%);
  width: 100%;
  max-width: 600px;
  background: #f5f5f5;
  height: 70vh;
  overflow-x: hidden;
}
 
.part1 {
  position: absolute;
  right: 50px;
  width: 175px;
  height: 225px;
  border: 1px solid #aaffaa;
  border-bottom: 0;
  transform: rotate(-50deg);
  background: -moz-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #ccffcc 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background: -webkit-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #ccffcc 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background: -ms-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #ccffcc 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background: -o-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #ccffcc 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background: radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #ccffcc 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background-size: 20px 20px;
}
                  
.part2 {
  position: absolute;
  top: 150px;
  right: 75px;
  width: 125px;
  height: 200px;
  border: 1px solid #aaffaa;
  border-bottom: 0;
  transform: rotate(-50deg);
  background: -moz-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,1) 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background: -webkit-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,1) 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background: -ms-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,1) 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background: -o-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,1) 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background: radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,1) 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, rgba(207,255,207,0.3) 10px, rgba(96, 16, 48, 0) 11px), none;
  background-size: 20px 20px;
} 
                  
.circle1 {
  position: absolute;
  top: 30px;
  right: 250px;
  width: 30px;
  height: 30px;
  background-image: radial-gradient(#eeffee, #ddffdd, #ccffcc, #bbffbb);
  border: 1px solid #aaffaa;
  border-radius: 50%;
}
                  
.circle2 {
  position: absolute;
  top: 150px;
  right: 275px;
  width: 50px;
  height: 50px;
  background-image: radial-gradient(#eeffee, #ddffdd, #ccffcc, #bbffbb);
  border: 1px solid #aaffaa;
  border-radius: 50%;
  opacity: 0.7;
}
                  
.circle3 {
  position: absolute;
  top: 350px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-image: radial-gradient(#eeffee, #ddffdd, #ccffcc, #bbffbb);
  border: 1px solid #aaffaa;
  border-radius: 50%;
  opacity: 0.7;
}
      
.text-cover {
  position: absolute;
  top: 100px;
  left: 0;
  display: block;
  width: 600px;
  height: 100%;
  padding: 20px;
  background: transparent, !important;
  z-index: 1;
  filter: grayscale(100%);
}
        
.text-cover label {
  position: relative;
  top: 150px;
  left: 50px;
  color: #aaaaaa;
  font-family: "Courier New", monospace;
  font-size: 12px;
}
                  
.text-cover > h1 {
  position: relative;
  top: 150px;
  left: 50px;
  width: 560px;
  color: #ff7700;
  font-family: "Courier New", monospace;
  font-size: 48px;
  white-space: wrap;
  text-align: center;
}
                  
.text-cover p {
  position: relative;
  top: 150px;
  left: 50px;
  width: 560px;
  color: #777777;
  font-size: 22px;
  text-align: justify;
}
                  
@media(max-width: 980px) {
  .text-cover label {
    left: 20px;
    font-size: 13px
  }
                  
  .text-cover > h1 {
    left: -20px;
    font-size: 54px;
  }
                  
  .text-cover p {
    left: 20px;
    width: 340px;
    font-size: 18px;
    font-weight: 700;
  }
}
                  
.fake_btn {
  position: relative;
  top: 150px;
  left: 350px;
  padding: 10px 20px;
  background-color: #0099ff;
  border: 0;
  outline: 0;
  border-radius: 8px;
  color: #ffffff;
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: 900;
}
                  
.fake_btn:active {
  transform: translatey(+4px);
}
                  
a {
  position: relative;
  top: 150px;
  left: 0px;
  font-family: "Courier New", monospace;
  font-size: 20px;
}
                  
@media(max-width: 980px) {
  a {
    top: 150px;
    left: -45vw;
  }
}
                  
@media(max-width: 480px) {
  a {
   top: 120px;
   left: -50vw;
  }
}

MENU

INFORMATION & CODE