Dr. Roger Ianjamasimanana

Stunning CSS patterns for eye-catching backgrounds

By Dr. Roger Ianjamasimanana

HTML/CSS Editor

JavaScript Editor


Console Output


                      
                          
HTML Output

                          
                          

                        

                     





  The above code creates 20 stunning CSS patterns for eye-catching backgrounds that will elevate your web design. 
   These effects are purely with CSS, without relying on external images. 
   With these creative and modern CSS techniques, you can replicate textures, designs, and shapes that catch the eye and 
   enhance the user experience. Let's learn more about them in this article. 



1. Diagonal stripes



  A simple way to create diagonal stripes using linear gradients. The code below defines a 200px by 200px box with a repeating pattern.




<!DOCTYPE html>
<html>
<head>
<style>
.diagonal-stripes {
width: 200px;
height: 200px;
background: repeating-linear-gradient(
  45deg,
  #3498db,
  #3498db 10px,
  #ecf0f1 10px,
  #ecf0f1 20px
);
}
</style>
</head>
<body>
<div class="diagonal-stripes"></div>
</body>
</html>




  In this example:



    
  
  • The container is set to 200px by 200px with the class .diagonal-stripes.
    • 
  
  • A repeating-linear-gradient with a 45-degree angle creates diagonal stripes. The angle of 45deg means that the stripes run from the top left to the bottom right.
    • 
  
  • The gradient repeats every 20px: 10px of #3498db (blue) followed by 10px of #ecf0f1 (light gray).
    • 
  
  • This creates a pattern of alternating blue and light gray stripes across the box diagonally.
    • 




2. Polka dots



  Create a polka dot pattern using radial gradients. This technique uses circles to form dots across a background.



<!DOCTYPE html>
<html>
<head>
<style>
.polka-dots {
width: 200px;
height: 200px;
border:1px solid black;
background-color: #ecf0f1;
background-image: radial-gradient(#e74c3c 15%, transparent 16%);
background-size: 30px 30px;
}
</style>
</head>
<body>
<div class="polka-dots"></div>
</body>
</html>




  In this example:



    
  
  • The box is 200px by 200px with a light background color #ecf0f1.
    • 
  
  • A radial-gradient is used to draw circles of color #e74c3c (red) that cover 15% of the gradient radius, then become transparent.
    • 
  
  • The background-size of 30px by 30px means that these dotted patterns repeat every 30 pixels both horizontally and vertically, creating an evenly spaced grid of red dots.
    • 




3. Checkerboard pattern



  A checkerboard pattern can be created using multiple layered gradients. This creates alternating squares of color.



<!DOCTYPE html>
<html>
<head>
<style>
.checkerboard {
width: 200px;
height: 200px;
border:1px solid black;
background:
  linear-gradient(45deg, #000 25%, transparent 25%),
  linear-gradient(-45deg, #000 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #000 75%),
  linear-gradient(-45deg, transparent 75%, #000 75%);
background-size: 40px 40px;
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}
</style>
</head>
<body>
<div class="checkerboard"></div>
</body>
</html>




  This code creates a checkerboard pattern:



    
  
  • The .checkerboard class uses four layered linear gradients to form squares.
    • 
  
  • Each gradient is rotated to cover different parts of the pattern, and together they form a repeating checkerboard effect.
    • 
  
  • background-size: 40px 40px; defines the size of each square.
    • 
  
  • background-position offsets each gradient layer so that the black squares alternate correctly.
    • 




4. Polka dot grid



  Combine radial gradients and background sizing to make a dotted grid. This pattern creates evenly spaced dots over a dark background.



<!DOCTYPE html>
<html>
<head>
<style>
.dot-grid {
width: 200px;
border:1px solid black;
height: 200px;
background-color: #2c3e50;
background-image: radial-gradient(circle, #ecf0f1 1px, transparent 1px);
background-size: 20px 20px;
}
</style>
</head>
<body>
<div class="dot-grid"></div>
</body>
</html>




  Explanation:



    
  
  • The .dot-grid element is sized at 200px by 200px with a dark background color #2c3e50.
    • 
  
  • A radial-gradient is used to draw small white dots (#ecf0f1) on a transparent background.
    • 
  
  • background-size: 20px 20px; spaces these dots 20px apart horizontally and vertically, forming a grid.
    • 




5. Conic gradient circle



  Use a conic gradient to create a circular pattern with multiple colors.



<!DOCTYPE html>
<html>
<head>
<style>
.conic-circle {
width: 200px;
border:1px solid black;
height: 200px;
background: conic-gradient(red, yellow, green, blue, purple, red);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="conic-circle"></div>
</body>
</html>




  In this example:



    
  
  • The element is given a circular shape with border-radius: 50%.
    • 
  
  • A conic-gradient fills the circle with a smooth transition of colors around its circumference, starting at the top and moving clockwise.
    • 
  
  • The gradient sequence repeats red at the end to ensure a seamless loop.
    • 






6. Diagonal checkerboard



  A diagonal variation of the checkerboard pattern using gradients.



<!DOCTYPE html>
<html>
<head>
<style>
.diagonal-checkerboard {
width: 200px;
height: 200px;
border:1px solid black;
background:
  linear-gradient(135deg, #333 25%, transparent 25%) 0 0,
  linear-gradient(225deg, #333 25%, transparent 25%) 0 0,
  linear-gradient(45deg, #333 25%, transparent 25%) 0 0,
  linear-gradient(-45deg, #333 25%, transparent 25%) 0 0;
background-size: 40px 40px;
background-repeat: repeat;
}
</style>
</head>
<body>
<div class="diagonal-checkerboard"></div>
</body>
</html>



    
  
  • This pattern uses four linear gradients at different angles (45°, 135°, 225°, -45°) layered on top of each other.
    • 
  
  • Each gradient paints a quadrant of a checkerboard cell in a diagonal manner.
    • 
  
  • The background-size defines the size of each repeating cell, and background-repeat ensures the pattern continues across the box.
    • 




7. Wavy pattern



  Create a wavy pattern using SVG data URLs as backgrounds.



<!DOCTYPE html>
<html>
<head>
<style>
.wavy-pattern {
width: 200px;
border:1px solid black;
height: 200px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path fill="%233498db" d="M0,50 Q50,0 100,50 T200,50 V200 H0z"/></svg>');
}
</style>
</head>
<body>
<div class="wavy-pattern"></div>
</body>
</html>




  This snippet uses an inline SVG defined as a data URL in the background property to create a wavy shape.
  
    
    
  • The SVG defines a wave path with a fill color of #3498db.
    • 
    
  • The background image is then applied to a 200px by 200px container, creating a repeating wave pattern if needed.
    • 
  





8. Inner Shadow Pattern



  Using multiple inset shadows to create a textured inner effect.



<!DOCTYPE html>
<html>
<head>
<style>
.inner-texture {
width: 200px;
height: 200px;
border:1px solid black;
background: #fff;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="inner-texture"></div>
</body>
</html>



    
  
  • The .inner-texture class applies two inset box-shadow effects.
    • 
  
  • Both shadows are drawn inside the element, creating a subtle depth and texture on the inside border.
    • 
  
  • This technique can simulate an inset or carved effect, making the element appear sunken.
    • 




9. Rainbow stripes



  Create a colorful rainbow stripe pattern with repeating linear gradients.



<!DOCTYPE html>
<html>
<head>
<style>
.rainbow-stripes {
width: 200px;
height: 200px;
border:1px solid black;
background: repeating-linear-gradient(
  to right,
  red,
  red 20px,
  orange 20px,
  orange 40px,
  yellow 40px,
  yellow 60px,
  green 60px,
  green 80px,
  blue 80px,
  blue 100px,
  indigo 100px,
  indigo 120px,
  violet 120px,
  violet 140px
);
}
</style>
</head>
<body>
<div class="rainbow-stripes"></div>
</body>
</html>




  Explanation:



    
  
  • The repeating-linear-gradient creates vertical stripes moving from left to right.
    • 
  
  • Each color band has a width of 20px, sequentially transitioning through the colors of the rainbow.
    • 
  
  • The pattern repeats across the width of the box, filling the entire area with rainbow stripes.
    • 




10. Complex multi-layered grid



  Let's use multiple backgrounds to create a complex grid-like pattern.



<!DOCTYPE html>
<html>
<head>
<style>
.complex-grid {
width: 200px;
height: 200px;
border:1px solid black;
background:
  linear-gradient(to right, transparent 1px, #ccc 1px),
  linear-gradient(to bottom, transparent 1px, #ccc 1px),
  linear-gradient(to right, transparent 1px, rgba(0,0,0,0.1) 1px),
  linear-gradient(to bottom, transparent 1px, rgba(0,0,0,0.1) 1px);
background-size: 20px 20px;
}
</style>
</head>
<body>
<div class="complex-grid"></div>
</body>
</html>



    
  
  • The .complex-grid uses four layered linear gradients to draw grid lines.
    • 
  
  • Two gradients in lighter color (#ccc) draw thicker grid lines, while the other two with rgba(0,0,0,0.1) draw thinner lines.
    • 
  
  • background-size: 20px 20px; sets the spacing between grid lines, creating a repeating grid pattern across the box.
    • 


                    

                    
		    
                    

                        
                        

				1 Views 
                            0 Comments 
                        

                        

                    

                    

                

                

                

                

                    

                        
Readers’ comment

                    

                    
                    
                    
                

                

                

                 
                    

                        
Log in to add a comment

                    


                    🔐 Access