BACKGROUNDS

Geometric Pattern Background

A modern geometric background made with layered CSS shapes and gradients, ideal for hero sections, cards, and dark interface layouts.

Geometric Pattern

Structured Shapes with Modern Depth

Pure CSS geometric background pattern.

HTML
<div class="geometric-pattern-bg">

  <div class="geometric-content">
    <span>Geometric Pattern</span>
    <h2>Structured Shapes with Modern Depth</h2>
    <p>Pure CSS geometric background pattern.</p>
  </div>

</div>
CSS
.geometric-pattern-bg{
  position:relative;
  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background-color:#050914;

  background-image:
    linear-gradient(
      30deg,
      rgba(34,211,238,.08) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(34,211,238,.08) 87.5%
    ),
    linear-gradient(
      150deg,
      rgba(139,92,246,.08) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(139,92,246,.08) 87.5%
    ),
    linear-gradient(
      30deg,
      rgba(217,70,239,.06) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(217,70,239,.06) 87.5%
    );

  background-size:80px 140px;
}

.geometric-pattern-bg::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      rgba(34,211,238,.10),
      transparent 55%
    );

  pointer-events:none;
}

.geometric-content{
  position:relative;
  z-index:2;

  max-width:600px;
  padding:30px;

  text-align:center;
}

.geometric-content span{
  display:inline-block;
  margin-bottom:12px;

  color:#22d3ee;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.geometric-content h2{
  margin:0 0 12px;

  color:#ffffff;
  font-size:32px;
  line-height:1.2;
}

.geometric-content p{
  margin:0;

  color:#c7d2e5;
  font-size:15px;
}

How This Geometric Pattern Background Works

The Geometric Pattern Background creates a structured dark backdrop using layered CSS linear-gradient() patterns. Its HTML is intentionally minimal: one .geometric-pattern-bg container holds a .geometric-content section with a small label, heading, and paragraph. There are no decorative HTML elements and no JavaScript in the published component.

The main container starts with background-color: #050914, giving the section its dark base. The geometric effect is then created with three separate linear-gradient() layers inside background-image. Because these gradients contain narrow colored sections followed by large transparent areas, repeating the resulting background creates the visible angular pattern.

The first gradient is positioned at 30deg and uses cyan rgba(34,211,238,.08). Its color occupies the beginning of the gradient up to 12%, becomes transparent at 12.5%, stays transparent until 87%, and introduces the cyan color again at 87.5%. These closely spaced stops produce defined transitions rather than a broad, smooth color blend.

The second gradient runs at 150deg, which introduces lines from the opposite direction. It uses purple rgba(139,92,246,.08) with the same 12%, 12.5%, 87%, and 87.5% stop arrangement. A third 30deg gradient adds magenta through rgba(217,70,239,.06). Combining these differently angled layers produces the repeating geometric structure.

The complete pattern is controlled by background-size: 80px 140px. This determines the dimensions of each repeated background tile. Instead of manually creating many shapes in the HTML, the browser repeats these gradient layers across the entire section. For more information about the technique used to build the pattern, see the MDN linear-gradient documentation.

The component also adds a .geometric-pattern-bg::before pseudo-element. It fills the entire container using position: absolute and inset: 0. A centered radial gradient adds a subtle cyan highlight using rgba(34,211,238,.10) before fading to transparent at 55%. This softens the otherwise regular pattern around the middle of the section and gives the content area a slightly brighter visual focus.

pointer-events: none is applied to the pseudo-element so the decorative layer cannot block interaction with content placed above it. The .geometric-content section uses position: relative and z-index: 2, ensuring the text stays above both the pattern and the central glow.

The content itself has a maximum width of 600px, 30px of padding, and centered text. The small label uses cyan #22d3ee, uppercase lettering, and 1.5px letter spacing. The main heading is white and 32px, while the supporting paragraph is 15px with the softer #c7d2e5 color. Flexbox on the parent centers this entire content block horizontally and vertically within the minimum 320px section height.

Customizing the Geometric Pattern Background

Most visual changes can be made by adjusting the existing gradient, pattern, and typography values.

  • Replace #050914 with another base color to change the overall background tone.
  • Change the cyan rgba(34,211,238,.08), purple rgba(139,92,246,.08), and magenta rgba(217,70,239,.06) values to create a different pattern palette.
  • Adjust the 30deg and 150deg gradient angles to change the direction of the geometric lines.
  • Modify the 12%, 12.5%, 87%, and 87.5% stops to change the proportions of the colored and transparent sections.
  • Change background-size: 80px 140px to make the repeated geometric pattern smaller or larger.
  • Adjust the centered cyan glow’s .10 opacity or 55% transparent stop to change its visibility and spread.
  • Modify min-height: 320px if the pattern needs to cover a taller or shorter section.
  • Change the 600px maximum content width, 30px padding, or existing font sizes to fit the surrounding page design.

Where to Use This Geometric Pattern Background

The regular geometric structure works well when a section needs visible detail while keeping text readable against a dark base.

  • Developer and technology website hero sections.
  • SaaS landing-page banners with centered content.
  • Portfolio introductions and project headers.
  • Feature sections that need a structured decorative background.
  • Coding or software-related website sections.
  • Call-to-action areas with headings, descriptions, and buttons.
  • Dark-theme content blocks that need more detail than a solid color.

For a softer alternative based on overlapping color areas rather than repeating angular shapes, the Mesh Gradient Background is a related CodeRipple component. The Geometric Pattern Background is particularly simple to integrate because its entire visual treatment is CSS-based and does not require images, SVG elements, or JavaScript.

Frequently Asked Questions

Does the Geometric Pattern Background use JavaScript?

No. The published component contains no JavaScript. The pattern, central glow, layout, and typography are all handled with CSS.

How is the geometric pattern created?

The component combines three linear-gradient() layers with transparent sections and different angles. These layers are repeated across the container using background-size: 80px 140px, creating the structured pattern without additional HTML shapes.

What does the ::before pseudo-element do?

It adds a subtle radial cyan glow over the center of the background. The glow begins with rgba(34,211,238,.10) and fades to transparent at 55%, giving the middle of the section slightly more visual emphasis.

Can I change the size of the geometric shapes?

Yes. The main value controlling the repeating pattern dimensions is background-size: 80px 140px. Changing those dimensions alters the size and spacing of the repeated gradient pattern.

The Geometric Pattern Background uses a compact combination of angled linear gradients, repeating background dimensions, and a centered radial highlight to create a structured CSS backdrop without extra assets or scripting.

Scroll to Top