🎨 Build a Unique CSS Pattern Background with Hover Animations and Light/Dark Mode Toggle 🌗✨
Frontend design lovers — this one’s for you! In this detailed tutorial, I’ll guide you through creating a beautiful, layered CSS pattern background with interactive hover effects and a smooth light/dark mode toggle. Whether you're a beginner exploring CSS gradients or a frontend enthusiast looking to craft standout designs, this project will level up your CSS skills.
📌 What Are We Building?
✅ A multi-layered CSS pattern background
✅ Interactive grid boxes that expand on hover
✅ A light/dark mode toggle button with animated transitions
✅ Fully responsive, modern UI with clean code
👉 Live Demo | 👉 Download Source Code
🔧 Tools & Technologies
HTML5
CSS3 (Grid, Gradients, Transitions, Transforms)
JavaScript (DOM manipulation for theme toggle)
Google Fonts
📜 Full Source Code
I’ll explain each part of the code step-by-step, but if you want to dive in or follow along:
👉 Grab the full project code here
📂 Step 1: Setup Your HTML Structure
We’ll start by setting up the basic HTML skeleton. It includes a container, a toggle button for light/dark mode, a grid of boxes, and a central text element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Patterns</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="container dark-mode">
<div class="toggle-btn" id="toggle-btn">☀️</div>
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<span>Echo</span>
<script src="script.js"></script>
</body>
</html>
✅ Explanation:
A
containerclass wraps the whole layout.A
toggle-btndiv acts as our theme switcher.A
griddiv holds severalboxdivs that will animate on hover.A
spanelement displays a large, centered text.
🎨 Step 2: Designing the Background Patterns with CSS
Here’s where the magic happens — a multi-layered background made entirely with CSS gradients!
@import url("https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap");
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
✅ Explanation:
We reset margins/paddings and disable overflow to prevent scrollbars from showing.
🌌 Dark Mode Background
.dark-mode {
background: linear-gradient(30deg, #111 12%, transparent 12.5%, transparent 87%, #111 87.5%, #111),
linear-gradient(150deg, #111 12%, transparent 12.5%, transparent 87%, #111 87.5%, #111),
linear-gradient(60deg, #7777 25%, transparent 25.5%, transparent 75%, #7777 75%, #7777);
background-position: 0 0, 0 0, 40px 70px;
background-color: #000;
background-size: 80px 140px;
box-shadow: inset 0 0 100px rgba(255, 215, 0, 0.1);
}
✅ Explanation:
Multiple gradients are layered together with different angles and positions.
A subtle box-shadow inset adds depth and glow.
☀️ Light Mode Background
.light-mode {
background: linear-gradient(30deg, #fefefe 12%, transparent 12.5%, transparent 87%, #fefefe 87.5%, #fefefe),
linear-gradient(150deg, #fefefe 12%, transparent 12.5%, transparent 87%, #fefefe 87.5%, #fefefe),
linear-gradient(60deg, #ccc8 25%, transparent 25.5%, transparent 75%, #ccc8 75%, #ccc8);
background-position: 0 0, 0 0, 40px 70px;
background-color: #fff;
background-size: 80px 140px;
box-shadow: inset 0 0 100px rgba(255, 215, 0, 0.1);
}
✅ Explanation:
- Same pattern logic, with lighter tones for a clean light mode look.
🟩 Step 3: Build the Interactive Grid Layout
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
grid-auto-rows: 50px;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
✅ Explanation:
A CSS Grid dynamically creates rows/columns.
Auto-fills the viewport, so it’s fully responsive.
🔲 Step 4: Add Hover Animations to Boxes
.box {
transition: all 0.3s ease;
}
.box:hover {
transform: scale(1.3);
background-color: rgba(255, 215, 0, 0.08);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
border-radius: 4px;
}
✅ Explanation:
Smooth scaling animation on hover.
A glow effect using
box-shadow.Subtle background color change to highlight the hovered box.
🖋️ Step 5: Styling Text and Toggle Button
Text Styling
span {
color: aliceblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
font-family: "Special Gothic Expanded One", sans-serif;
z-index: 2;
transition: color 0.5s ease;
}
.light-mode span {
color: #000;
}
✅ Explanation:
Large centered text.
Color switches based on theme mode.
Toggle Button Styling
.toggle-btn {
position: absolute;
top: 20px;
right: 20px;
background: #222;
color: #fff;
padding: 10px 15px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
z-index: 3;
transition: all 0.3s ease;
}
.light-mode .toggle-btn {
background-color: #eee;
color: #222;
}
⚙️ Step 6: Add JavaScript for Theme Toggle
📄 script.js
const toggleBtn = document.getElementById('toggle-btn');
const body = document.body;
toggleBtn.addEventListener('click', () => {
body.classList.toggle('light-mode');
body.classList.toggle('dark-mode');
// Update icon
if (body.classList.contains('light-mode')) {
toggleBtn.innerHTML = '🌙';
} else {
toggleBtn.innerHTML = '☀️';
}
});
✅ Explanation:
Adds or removes
light-modeanddark-modeclasses.Dynamically switches the button icon between sun and moon.
📌 Concepts Covered
CSS Multi-layered background patterns
CSS Grid layout
Hover animations with CSS transitions
Light and dark mode toggling with JS
Font integration via Google Fonts
Clean, responsive, animated UIs
📣 Final Thoughts
This pattern background is a fresh, creative take on CSS gradients. It’s fully customizable — you can tweak the grid size, colors, or animations to match your project style.
And this is just the start!
I’ll be sharing many more unique frontend designs, animations, and effects tutorials — so make sure to follow my Hashnode blog and subscribe to my YouTube channel for more!
👉 Subscribe to YouTube
👉 Check out the live demo
