Scribd
Upload
10 views2 pages

Index

The document is an HTML template for a Gradient Background Generator web application. It includes features such as color selection, gradient direction options, and buttons for generating random gradients, copying CSS, and downloading images. The layout consists of a sidebar for controls and a canvas area for previewing the gradient background.

Uploaded by

jamalarain93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views2 pages

Index

The document is an HTML template for a Gradient Background Generator web application. It includes features such as color selection, gradient direction options, and buttons for generating random gradients, copying CSS, and downloading images. The layout consists of a sidebar for controls and a canvas area for previewing the gradient background.

Uploaded by

jamalarain93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Background Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
<h1>🎨 Gradient Background Generator</h1>

<div class="main">
<div class="sidebar">

<p>🎨 Templates:</p>
<select id="template">
<option value="">Select a Template</option>
</select>
<div class="button-row">
<button id="random-btn">Generate Random Gradient</button>
</div>

<p>Pick Colors:</p>

<div id="colors">
<input type="color" class="color-picker" value="#ff0000">
<input type="color" class="color-picker" value="#0000ff">
</div>
<div class="button-row">
<button id="add-color">➕ Add Color</button>
<button id="remove-color">➖ Remove Color</button>
</div>

<p>Gradient Direction:</p>
<select id="gradient-direction">
<option value="90deg">Left to Right</option>
<option value="180deg">Top to Bottom</option>
<option value="45deg">Diagonal ↘</option>
<option value="radial">Radial</option>
</select>

<div class="button-row">
<button id="copy-btn">📋 Copy CSS</button>
<button id="download-btn">⬇️ Download PNG</button>
</div>

</div>

<div class="canvas-container" id="preview">


<canvas id="overlay-canvas"></canvas>
</div>
</div>
</div>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"><
/script>
<script src="script.js"></script>
</body>
</html>

You might also like