Advanced Gradient Generator Script for Blogger
Advanced Gradient Generator Script for Blogger
In this blog post, we’ll explore the Advanced Gradient Generator Script for Blogger, what it does, how it works, and how you can add it to your Blogger/Blogspot.com website with ease.
Whether you're a designer, developer, or creative Blogger looking to enhance your blog's visual appeal, this free tool will empower you to create beautiful CSS gradients in seconds — no CSS knowledge required!
What is the Gradient Generator Script?
The Gradient Generator is an advanced web tool built with HTML, CSS, JavaScript, and UIkit, specifically designed for Blogger users. This script lets you visually craft linear gradients, customize angle and direction, add multiple color stops, and copy ready-to-use CSS code directly for your designs — all without leaving your blog.
Key Features
🎨 Live Gradient Preview: See changes in real time as you customize colors, angles, and direction settings.
➕ Up to 6 Color Stops: Easily add or remove up to six gradient color points with full HEX color control.
🔄 Direction Dial & Arrows: Rotate direction using a draggable icon or select from 8 preset directions like top, left, and diagonals.
🎲 Random Generator: Instantly create beautiful gradient combinations with a single click.
📋 One-Click Copy: Copy the complete CSS gradient code with one click for use in your Blogger theme or widgets.
📱 Mobile Friendly: Fully responsive design using UIkit for seamless experience on any device.
How to Install the Gradient Generator in Blogger
- Download or Copy the Script: Get the complete source code from the link provided below.
- Add to Blogger Page or Post: Switch to HTML view in your Blogger editor and paste the script code into a page or post.
- Save and Publish: Hit "Publish" and enjoy your live gradient generator directly on your blog.
💾 Get the Code
You can download the full script or copy the code directly from this blog post. It's 100% free and doesn't require any external API or backend.
📄 Full Script (Copy & Paste)
Below is the full code for the Advanced Gradient Generator. Copy and paste it into your Blogger post or page using HTML view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Gradient Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/uikit@3.16.25/dist/css/uikit.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.25/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.25/dist/js/uikit-icons.min.js"></script>
<style>
body {
background: #f0f0f0;
}
#gradient-preview {
height: 200px;
border-radius: 10px;
border: 2px solid #ccc;
transition: background 0.3s ease;
margin-bottom: 20px;
}
#angle-dial {
width: 60px;
height: 60px;
border-radius: 50%;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease;
border: 2px solid #ccc;
margin-left: 10px;
}
.color-control {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 5px;
}
.uk-card {
max-width: 960px;
margin: auto;
}
</style>
</head>
<body class="uk-section uk-section-muted">
<div class="uk-container">
<h2 class="uk-heading-line uk-text-center"><span>🎨 Advanced Linear Gradient Generator</span></h2>
<div class="uk-card uk-card-default uk-card-body uk-margin">
<div id="gradient-preview"></div>
<div class="uk-grid-small uk-child-width-1-2@s uk-grid-match" uk-grid>
<!-- Left: Direction Controls -->
<div>
<h4>🧭 Direction Settings</h4>
<div class="uk-flex uk-flex-middle uk-margin-small-bottom">
<input class="uk-input" type="number" id="angle" min="0" max="360" value="90" style="width: 80px;">
<div id="angle-dial" title="Rotate angle">
<span uk-icon="icon: refresh"></span>
</div>
</div>
<label class="uk-form-label">Quick Directions</label>
<div class="uk-grid-small uk-child-width-1-4@s uk-text-center" uk-grid>
<div><button class="uk-button uk-button-default uk-button-small direction-btn" data-angle="0">↑</button></div>
<div><button class="uk-button uk-button-default uk-button-small direction-btn" data-angle="90">→</button></div>
<div><button class="uk-button uk-button-default uk-button-small direction-btn" data-angle="180">↓</button></div>
<div><button class="uk-button uk-button-default uk-button-small direction-btn" data-angle="270">←</button></div>
<div><button class="uk-button uk-button-default uk-button-small direction-btn" data-angle="45">↗</button></div>
<div><button class="uk-button uk-button-default uk-button-small direction-btn" data-angle="135">↘</button></div>
<div><button class="uk-button uk-button-default uk-button-small direction-btn" data-angle="225">↙</button></div>
<div><button class="uk-button uk-button-default uk-button-small direction-btn" data-angle="315">↖</button></div>
</div>
<label class="uk-margin-small-top">
<input class="uk-checkbox" id="repeating" type="checkbox"> Repeating Gradient
</label>
<label class="uk-margin-small-left">
<input class="uk-checkbox" id="fixed-bg" type="checkbox"> Fixed Background
</label>
</div>
<!-- Right: Colors -->
<div>
<h4>🎨 Gradient Colors</h4>
<div id="color-container"></div>
<button class="uk-button uk-button-small uk-button-default" onclick="addColor()">+ Add Color</button>
<button class="uk-button uk-button-small uk-button-danger" onclick="removeColor()">− Remove</button>
</div>
</div>
<div class="uk-margin-top uk-flex uk-flex-between uk-flex-middle">
<button class="uk-button uk-button-default" onclick="generateRandom()">🎲 Random</button>
<button class="uk-button uk-button-primary" onclick="copyCSS()">📋 Copy CSS</button>
</div>
<pre id="css-output" class="uk-margin-top uk-background-muted uk-padding-small uk-text-left"></pre>
</div>
</div>
<script>
const angleInput = document.getElementById('angle');
const dial = document.getElementById('angle-dial');
const colorContainer = document.getElementById('color-container');
const preview = document.getElementById('gradient-preview');
const output = document.getElementById('css-output');
const repeating = document.getElementById('repeating');
const fixedBg = document.getElementById('fixed-bg');
let colorCount = 3;
function addColor() {
if (colorCount >= 6) return;
colorCount++;
renderColors();
updateGradient();
}
function removeColor() {
if (colorCount <= 2) return;
colorCount--;
renderColors();
updateGradient();
}
function renderColors() {
colorContainer.innerHTML = '';
for (let i = 0; i < colorCount; i++) {
const color = document.createElement('div');
color.className = 'color-control';
color.innerHTML = `
<input type="color" class="uk-input color-stop" value="${randomHex()}" style="width: 60px;">
`;
colorContainer.appendChild(color);
}
document.querySelectorAll('.color-stop').forEach(input => {
input.addEventListener('input', updateGradient);
});
}
function updateGradient() {
const angle = `${angleInput.value}deg`;
const colors = Array.from(document.querySelectorAll('.color-stop')).map(input => input.value);
const gradientType = repeating.checked ? 'repeating-linear-gradient' : 'linear-gradient';
const gradient = `${gradientType}(${angle}, ${colors.join(', ')})`;
preview.style.background = gradient;
preview.style.backgroundAttachment = fixedBg.checked ? 'fixed' : 'scroll';
output.textContent = `background: ${gradient};\nbackground-attachment: ${preview.style.backgroundAttachment};`;
updateDial();
}
function updateDial() {
const angleVal = parseInt(angleInput.value) || 0;
dial.style.transform = `rotate(${angleVal}deg)`;
}
function copyCSS() {
const temp = document.createElement("textarea");
temp.value = output.textContent;
document.body.appendChild(temp);
temp.select();
document.execCommand("copy");
document.body.removeChild(temp);
UIkit.notification("CSS copied to clipboard!", { status: 'success' });
}
function generateRandom() {
angleInput.value = Math.floor(Math.random() * 360);
const colorInputs = document.querySelectorAll('.color-stop');
colorInputs.forEach(input => input.value = randomHex());
updateGradient();
}
function randomHex() {
return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}
dial.addEventListener('mousedown', (e) => {
function move(e) {
const rect = dial.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const dx = e.clientX - cx;
const dy = e.clientY - cy;
const rad = Math.atan2(dy, dx);
const deg = (rad * 180 / Math.PI + 360) % 360;
angleInput.value = Math.round(deg);
updateGradient();
}
function up() {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', up);
}
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', up);
});
// Direction presets
document.querySelectorAll('.direction-btn').forEach(btn => {
btn.addEventListener('click', () => {
angleInput.value = btn.dataset.angle;
updateGradient();
});
});
angleInput.addEventListener('input', updateGradient);
repeating.addEventListener('change', updateGradient);
fixedBg.addEventListener('change', updateGradient);
// Init
renderColors();
updateGradient();
</script>
</body>
</html>
