Cool BackGround

Developer
Shak Daniel
Size
2,709 Kb
Views
16,192
  1. Cool BackGround Previews
  2. Cool BackGround HTML Codes
  3. Cool BackGround CSS Codes
  4. Cool BackGround JS Codes

How do I make an cool background?

Just playing around and this happened, it's looks like a cool pattern.. What is a cool background? How do you make a cool background? This script and codes were developed by Shak Daniel on 24 September 2022, Saturday.

Cool BackGround Previews
IQ Test

Cool BackGround - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cool BackGround</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div> <div class='hexagon'></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Cool BackGround - Script Codes CSS Codes

body,
html { width: 960px; min-height: 600px; margin: 0 auto; overflow: hidden; background: linear-gradient(135deg, #34a4ca 0%, #59d7dd 28%, #a8f2f0 59%, #d0f8ef 84%, #d6f6e1 100%) repeat scroll 0 0 rgba(0,0,0,0);
}
.container { width: 1000px; height: 1000px;
}
.hexagon { position: relative; display: inline-block; margin: 0px 8px; margin-top: 4px; background-color: rgba(255,255,255,0.05);
}
.hexagon,
.hexagon::before,
.hexagon::after { width: 28px; height: 50px; border: 1px solid #fff;
}
.hexagon::before { background-color: inherit; content: ""; position: absolute; left: 0; transform: rotate(-60deg);
}
.hexagon::after { background-color: inherit; content: ""; position: absolute; left: 0; transform: rotate(60deg);
}
.hexagon:nth-child(even) { top: -29px;
}

Cool BackGround - Script Codes JS Codes

/********************************
https://twitter.com/Shak_Dizzle
http://instagram.com/shak_dizzle
http://dribbble.com/shakdaniel
********************************/
Cool BackGround - Script Codes
Cool BackGround - Script Codes
Home Page Home
Developer Shak Daniel
Username shakdaniel
Uploaded September 24, 2022
Rating 4.5
Size 2,709 Kb
Views 16,192
Do you need developer help for Cool BackGround?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shak Daniel (shakdaniel) Script Codes
Name
A Pen by Shak Daniel
Samurai Slash
Pure CSS Terminal
Flat-n-Blur
Applying a CSS and SVG mask
Halloween CSS Candy
Animated Logo
Ninja Zoom Nav
Drag -n- Blur
My CSS Logo
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!