Random Background Generator
About this app
Generate random backgrounds with various shapes and colors
Random Background Generator Random Background Generator Shape: Circle Square Triangle Color: Transparency: Resolution: Download Backgrounds Create Patterns Single Shape Multiple Shapes Create Pattern
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Random Background Generator</title>
<meta name="description" content="Generate random backgrounds with various shapes and colors">
<meta name="keywords" content="random background generator, backgrounds, shapes, colors, patterns">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
// Generate random backgrounds
function generateBackgrounds() {
// Get customization options
var shape = document.getElementById("shape").value;
var color = document.getElementById("color").value;
var transparency = document.getElementById("transparency").value;
var resolution = document.getElementById("resolution").value;
// Generate random backgrounds
var backgroundsContainer = document.getElementById("backgrounds-container");
backgroundsContainer.innerHTML = "";
for (var i = 0; i < resolution; i++) {
var background = document.createElement("div");
background.className = "background";
background.style.background = color;
background.style.opacity = transparency;
background.style.borderRadius = shape;
backgroundsContainer.appendChild(background);
}
}
// Update backgrounds when customization options change
document.getElementById("shape").addEventListener("change", generateBackgrounds);
document.getElementById("color").addEventListener("change", generateBackgrounds);
document.getElementById("transparency").addEventListener("change", generateBackgrounds);
document.getElementById("resolution").addEventListener("change", generateBackgrounds);
// Download backgrounds as images
function downloadBackgrounds() {
var backgroundsContainer = document.getElementById("backgrounds-container");
html2canvas(backgroundsContainer, {
onrendered: function(canvas) {
var link = document.createElement("a");
link.href = canvas.toDataURL("image/png");
link.download = "background.png";
link.click();
}
});
}
document.getElementById("download-btn").addEventListener("click", downloadBackgrounds);
// Create patterns
function createPattern() {
var patternContainer = document.getElementById("pattern-container");
patternContainer.innerHTML = "";
var selectedShapes = document.querySelectorAll('input[name="pattern-shape"]:checked');
for (var i = 0; i < selectedShapes.length; i++) {
var shape = selectedShapes[i].value;
var pattern = document.createElement("div");
pattern.className = "pattern";
pattern.style.background = randomColor();
pattern.style.borderRadius = shape;
patternContainer.appendChild(pattern);
}
}
document.getElementById("create-pattern-btn").addEventListener("click", createPattern);
// Generate random color
function randomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
padding: 20px;
}
h1 {
text-align: center;
font-size: 36px;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.backgrounds-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
}
.background {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
}
.pattern-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
}
.pattern {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
}
.download-btn {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Random Background Generator</h1>
<div class="form-group">
<label for="shape">Shape:</label>
<select id="shape" class="form-control">
<option value="50%">Circle</option>
<option value="20px">Square</option>
<option value="10px">Triangle</option>
</select>
</div>
<div class="form-group">
<label for="color">Color:</label>
<input type="color" id="color" class="form-control">
</div>
<div class="form-group">
<label for="transparency">Transparency:</label>
<input type="range" id="transparency" min="0" max="1" step="0.1" value="1" class="form-control">
</div>
<div class="form-group">
<label for="resolution">Resolution:</label>
<input type="number" id="resolution" min="1" max="10" value="1" class="form-control">
</div>
<button id="download-btn" class="btn btn-primary download-btn">Download Backgrounds</button>
<div id="backgrounds-container" class="backgrounds-container"></div>
<h2>Create Patterns</h2>
<div class="form-group">
<input type="radio" id="single-shape" name="pattern-shape" value="50%" checked>
<label for="single-shape">Single Shape</label>
</div>
<div class="form-group">
<input type="radio" id="multiple-shapes" name="pattern-shape" value="20px">
<label for="multiple-shapes">Multiple Shapes</label>
</div>
<button id="create-pattern-btn" class="btn btn-primary">Create Pattern</button>
<div id="pattern-container" class="pattern-container"></div>
</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</body>
</html>
NEW APPS
These are apps made by the community!