<!DOCTYPE html>
<html lang="en">
<head>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Inter:wght@600&family=Open+Sans&family=Phudu&family=Quicksand:wght@500&family=Roboto&family=Rubik&family=Saira+Semi+Condensed&family=Saira:wght@300;400;500&display=swap" rel="stylesheet">
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="All-in-one PDF web tools">
<meta name="description" content="Gradient maker and generator - create gradient for free.">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
    
    <link rel="stylesheet" href="settings/style.css">
    <title>Free Gradient Maker & Generator</title>
    

<link rel="icon" type="image/png" href="settings/favicon.png">

<link rel="preload" href="settings/style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Protest+Riot&family=Roboto+Slab:wght@100;400&family=Titillium+Web:wght@300&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="script.js"></script>
</head>
<body>

<!DOCTYPE html>
<html lang="en">

<head>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Inter:wght@600&family=Open+Sans&family=Phudu&family=Quicksand:wght@500&family=Roboto&family=Rubik&family=Saira+Semi+Condensed&family=Saira:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Protest+Riot&family=Roboto+Slab:wght@100;400&family=Titillium+Web:wght@300&display=swap" rel="stylesheet">
</head>

<body>


    <div class="main-header">
    <div class="logo">
        <a href="/">
            <img src="settings/logo.png" alt="Logo">
        </a>
    </div>
</div>

</body>

</html>
 



 

 <center>
 
  
</center>




<div class="main-cont">





<style>
    
    
    :root {
  --transparentbg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAnSURBVBhXY7xz5w4DDCgrK8PZTHAWGoN0Ccb////DDbl79y4t7AAAVTYIoL4XvhsAAAAASUVORK5CYII=");
}

#generateimg_btn, #generatesrc_btn{
    background:#30F361;
    cursor:pointer;
    padding:8px;
    border-radius:10px;
    border:0;
    
    
}

.d-flex {
  display: flex;
}
.float-right {
  float: right;
}
.justify-content-evenly {
  justify-content: space-evenly;
}
.p-relative {
  position: relative;
}
.h-100 {
  height: 100%;
}
.w-100 {
  width: 100%;
}
.m-10 {
  margin: 10px;
}
.mt-10 {
  margin-top: 10px;
}
#at-tool-wrapper {
  display: grid;
  grid-template-rows: 320px 1fr minmax(300px, auto);
  grid-template-columns: 345px 1fr 26%;
  gap: 15px;
  grid-template-areas: "layer preview mpreview" "preset conf generate" "code code code";
  height: 900px;
  background:#fff;
  border:5px solid #1460D8;
  padding:20px;
  border-radius:10px;
}
@media (max-width: 1200px) {
  #at-tool-wrapper {
    grid-template-columns: 50% 50%;
    grid-template-rows: 258px 345px 1fr 135px 280px;
    grid-template-areas: "preset layer" "preview mpreview" "conf conf" "generate generate" "code code";
    height: auto;
  }
}
@media (max-width: 991px) {
  #at-tool-wrapper {
    grid-template-columns: 100%;
    grid-template-rows: 258px 258px 345px 345px 1fr 135px 280px;
    grid-template-areas: "preset" "layer" "mpreview" "preview" "conf" "generate" "code";
    height: auto;
  }
}
.at-preset-panel {
  grid-area: preset;
  border: 1px solid #9c9c9c;
}
.at-layer-panel {
  grid-area: layer;
}
.at-preview-panel {
  grid-area: preview;
  border: 1px solid #9c9c9c;
}
.at-mpreview-panel {
  grid-area: mpreview;
  border: 1px solid #9c9c9c;
  background: #f5f5f5;
}
.at-conf-panel {
  grid-area: conf;
  border: 1px solid #9c9c9c;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.at-generate-panel {
  grid-area: generate;
  border: 1px solid #9c9c9c;
}
.at-code-panel {
  grid-area: code;
}
.at-tool-wrapper h2 {
  font-size: 1rem;
  font-weight: 400;
  padding: 5px 7px;
  margin: 0;
  color: #000;
  background: #f5f5f5;
  font-family: var(--at-font-sans-serif);
}
.at-tool-wrapper input,
.at-tool-wrapper select {
  height: 26px;
  padding: 1px 2px;
}
.at-tool-wrapper .w55 {
  width: 55px;
}
.at-tool-wrapper .at-ico {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  position: relative;
  top: 1px;
  text-transform: none;
  margin: 0 4px;
  font-size: 1.2rem;
}
.at-tool-wrapper .at-btn:disabled {
  border: 1px solid #575757;
}
div.g_box {
  overflow: auto;
  padding: 10px;
  color: #6a6a6a;
  font-size: 14px;
  background-color: #f5f5f5;
}
div.g_box .lbl {
  display: inline-block;
  margin-left: 8px;
}
.at-layer-panel h2 {
  border-top: 1px solid #9c9c9c;
  border-left: 1px solid #9c9c9c;
  border-right: 1px solid #9c9c9c;
}
.g_layer_cont {
  position: relative;
  display: block;
  height: calc(100% - 72px);
  border-left: 1px solid #9c9c9c;
  border-right: 1px solid #9c9c9c;
  border-bottom: 1px solid #9c9c9c;
  border-top: none;
  overflow-y: scroll;
  background-color: #fff;
  padding-top: 10px;
}
.g_layer_cont .g_layer {
  height: 45px;
  padding: 4px 6px 6px 6px;
  border-bottom: 1px solid #d7d7d7;
  position: relative;
  top: 0;
  clear: both;
}
.g_layer_cont .g_layer.selected {
  z-index: 25;
}
.g_layer_cont .g_layer .g_layer_bg {
  border: 1px solid gray;
  height: 100%;
}
.g_layer_cont .g_layer .g_layer_bgt {
  background-image: var(--transparentbg);
  height: 100%;
}
.g_layer_cont .g_layer:hover {
  background-color: #89c6ff;
  cursor: grab;
}
.g_layer_cont .g_layer.grab {
  cursor: grabbing;
}
.g_layer_cont .selected {
  background-color: #5e9bff;
}
.g_layer_btn {
  margin: 8px 0 15px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.g_layer_btn .at-btn {
  font-weight: 400;
  flex-grow: 1;
  padding: 5px;
  margin-top: 2px;
}
.g_layer_preset {
  border: none;
  height: 227px;
  padding-top: 2px;
  overflow-y: scroll;
}
.g_layer_preset .g_l_preset {
  width: 59px;
  height: 59px;
  display: inline-block;
  position: relative;
  margin: 5px 0 0 5px;
  border: 1px solid #646464;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}
.g_layer_preset .g_l_preset div {
  width: 100%;
  height: 100%;
  position: absolute;
}
.at-preview-panel {
  display: flex;
  flex-direction: column;
}
.at-preview-panel div.p_col {
  background-image: var(--transparentbg);
  min-height: 200px;
  flex-grow: 1;
  position: relative;
}
.at-preview-panel div.p_col > div {
  min-height: 200px;
}
.at-conf-panel .g_box_bottom,
.at-conf-panel .g_box_top {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  justify-content: space-between;
  padding: 10px;
}
.at-conf-panel .g_box_bottom .lbl,
.at-conf-panel .g_box_top .lbl {
  margin-right: 2px;
}
@media (max-width: 500px) {
  .at-conf-panel .g_box_bottom,
  .at-conf-panel .g_box_top {
    justify-content: initial;
    flex-direction: column;
    align-items: baseline;
    gap: 10px;
  }
}
.at-config-range {
  display: grid;
  grid-template: repeat(2, -webkit-max-content) 1.8em/1fr 1fr;
  grid-template: repeat(2, max-content) 1.8em/1fr 1fr;
  position: relative;
  border-radius: 1.8em;
  background: linear-gradient(
    0deg,
    transparent 14px,
    #07375d17 15px,
    #298b98 16px,
    transparent 16px
  );
  touch-action: none;
  cursor: copy;
}
.at-config-range input[type="range"] {
  padding: 0;
  grid-column: 1 / span 2;
  grid-row: 3;
  z-index: 1;
  top: 0;
  left: 0;
  margin: 0;
  background: 0 0;
  outline: 0;
  color: #000;
  pointer-events: none;
}
.at-config-range input[type="range"],
.at-config-range input[type="range"]::-webkit-slider-runnable-track,
.at-config-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.at-config-range input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: 0 0;
}
.at-config-range input[type="range"]::-moz-range-track {
  width: 100%;
  height: 100%;
  background: 0 0;
}
.at-config-range input[type="range"]::-webkit-slider-thumb {
  width: 1.8em;
  height: 1.8em;
  border-radius: 1.8em;
  background: currentcolor;
  pointer-events: auto;
  border: 4px solid #646464;
  cursor: move;
  transition: border 0.2s ease 0s;
}
.at-config-range input[type="range"]::-moz-range-thumb {
  width: 1.8em;
  height: 1.8em;
  border-radius: 1.8em;
  background: currentcolor;
  pointer-events: auto;
  border: 4px solid #646464;
  cursor: move;
  transition: border 0.2s ease 0s;
}
.at-config-range input[type="range"]:focus {
  z-index: 2;
}
.at-config-range input[type="range"]:focus,
.at-config-range input[type="range"]:focus + output {
  color: #ff8c00;
}
.alpha-range {
  top: 12px;
}
.alpha-range input.selected[type="range"]::-webkit-slider-thumb {
  border: 3px dashed #03a9f4;
  box-shadow: 0 0 2px #fff inset;
}
.alpha-range input.selected[type="range"]::-moz-range-thumb {
  border: 3px dashed #03a9f4;
  box-shadow: 0 0 2px #fff inset;
}
.color-range {
  top: -7px;
}
.color-range input.selected[type="range"]::-webkit-slider-thumb {
  border: 3px dashed #03a9f4;
  box-shadow: 0 0 2px #fff inset;
}
.color-range input.selected[type="range"]::-moz-range-thumb {
  border: 3px dashed #03a9f4;
  box-shadow: 0 0 2px #fff inset;
}
.at-layer-range {
  margin: 0 20px;
}
.at-layer-range .s_bg {
  background-image: var(--transparentbg);
  border: none;
  height: 65px;
  width: auto;
}
.p_col > div::after {
  content: "layer preview";
  position: absolute;
  filter: opacity(0.5);
  padding: 5px 8px;
  z-index: 1;
  top: 0;
  border-radius: 0 0 10px;
  background: #fff;
}
.at-mpreview-panel .p_col > div::after {
  content: "multi-layers preview";
}
.at-code-panel div.tab {
  position: relative;
  top: 1px;
}
.at-code-panel div.tab span {
  background-color: #fff;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  cursor: pointer;
  padding: 7px 10px;
}
.at-code-panel div.tab span.hide {
  background-color: Silver;
  border-bottom: 1px solid #ddd;
}
.at-code-panel .code {
  background-color: #081c2f;
  color: #fff;
  border: 1px solid #ddd;
  font: 13px monospace;
  height: 250px;
  width: 100%;
  overflow: auto;
  padding: 2px 0 0 12px;
}
.at-code-panel .code .code_base64 {
  background-color: #081c2f;
  color: #fff;
  font: 13px monospace;
  overflow: auto;
  border: medium none;
  box-sizing: border-box;
  display: block;
  height: 243px;
  resize: none;
  width: 100%;
}
.at-code-panel .code .code_data {
  display: none;
}
.at-code-panel .code .code_data:first-child {
  display: block;
}
.scontainer {
  border-image: none;
  border-style: solid;
  border-width: 1px;
  height: 35px;
  font-size: 1px;
  z-index: 1;
}
.sbar {
  border-bottom: 3px solid gray;
  height: 17px;
  margin: 0 24px;
}
.shandle {
  background-color: #d3d3d3;
  border: 1px solid #818181;
  border-radius: 10px;
  color: gray;
  cursor: pointer;
  height: 20px;
  position: relative;
  top: 6px;
  width: 20px;
}
.circlecontainer {
  background: none repeat scroll 0 0 #fff;
  border-image: none;
  border-style: solid;
  border-width: 2px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  cursor: default;
}
#dial {
  height: 2px;
  margin: 49px 0 0 5px;
  display: block;
  width: 90px;
}
#dial_0 {
  font-size: 9px;
  left: 88px;
  position: inherit;
  top: 41px;
}
#dial_90 {
  font-size: 9px;
  left: 43px;
  position: inherit;
  top: 1px;
}
#dial_180 {
  font-size: 9px;
  left: 1px;
  position: inherit;
  top: 41px;
}
#dial_270 {
  font-size: 9px;
  left: 40px;
  position: inherit;
  top: 87px;
}
#dial_l {
  background-color: red;
  width: 50%;
  height: 2px;
}
#r_pt {
  height: 1px;
  margin-left: 50px;
  margin-top: 50px;
  width: 1px;
  position: absolute;
}
.at-config-range2d-position {
  border: 1px solid #000;
  background: #fff;
  width: 151px;
  height: 151px;
  border-radius: 151px;
  position: relative;
  display: inline-block;
}
.at-config-range2d-position > div {
  height: 100%;
}
.at-config-range2d-position,
.at-config-range2d-position label {
  transition: all 0.6s;
}
.at-config-range2d-position label {
  position: absolute;
  font-size: 10px;
}
.at-config-range2d-position {
  z-index: 2;
}
.at-config-range2d-position,
.at-config-range2d-position:before {
  border-radius: 0;
  transition: all 0.6s;
}
.at-config-range2d-position:before {
  content: " ";
  display: block;
  width: 96%;
  height: 96%;
  border: 2px solid #000;
  top: 2%;
  position: absolute;
  left: 2%;
}
.at-config-range2d-position label:nth-of-type(1) {
  top: 90%;
  right: 4%;
}
.at-config-range2d-position label:nth-of-type(1):before {
  content: "100,100";
}
.at-config-range2d-position label:nth-of-type(2) {
  right: 4%;
  top: 4%;
}
.at-config-range2d-position label:nth-of-type(2):before {
  content: "100,0";
}
.at-config-range2d-position label:nth-of-type(3) {
  top: 4%;
  left: 4%;
}
.at-config-range2d-position label:nth-of-type(3):before {
  content: "0,0";
}
.at-config-range2d-position label:nth-of-type(4) {
  left: 4%;
  top: 90%;
}
.at-config-range2d-position label:nth-of-type(4):before {
  content: "0,100";
}
.at-config-range2d-position .point-wrapper {
  display: block;
}
.at-config-range2d-position .point-wrapper {
  left: 10px;
  top: 10px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  position: relative;
}
.at-config-range2d-position .point-wrapper .point {
  background: #d32f2f;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  position: absolute;
}
.at-config-range2d-inputs {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.at-config-range2d-inputs > div:nth-of-type(2),
.at-config-range2d-inputs > div:nth-of-type(3) {
  display: inline;
}

    
</style>

<script>document.write(atob("PHNjcmlwdCBzcmM9Imh0dHBzOi8vYW5ncnl0b29scy5jb20vZ3JhZGllbnQvaW1hZ2UvanMvZ3JhZGllbnQtaW1hZ2UtMi4zLmpzPzEiPjwvc2NyaXB0Pg=="));</script>

<div class="at-container"></div><div class="at-container"><div class="at-row"><div class="at-col"><div class="at-tool-container"><div id="at-tool-wrapper" class="at-tool-wrapper"><div id="at-preset-panel" class="at-preset-panel"><h2>Presets</h2><div id="g_layer_preset" class="g_layer_preset"></div></div><div id="at-layer-panel" class="at-layer-panel"><h2>layers</h2><div id="g_layer_cont" class="g_layer_cont"><!--<div class="g_layer"><div class="g_layer_bgt"><div class="g_layer_bg"></div></div></div>--></div><div id="g_layer_btn" class="g_layer_btn"><button type="button" class="at-btn" id="g_layer_new" value="add new" title="add new layer"><span class="at-ico">&#x2B;</span> Add</button> <button type="button" class="at-btn" id="g_layer_up" value="up" title="move layer up"><span class="at-ico">&#x2259;</span> Up</button> <button type="button" class="at-btn" id="g_layer_down" value="down" title="move layer down"><span class="at-ico">&#x225A;</span> Down</button> <button type="button" class="at-btn" id="g_layer_del" value="delete" title="remove layer"><span class="at-ico">&#10005;</span> Delete</button></div></div><div id="at-preview-panel" class="at-preview-panel"><div id="p_col" class="p_col"></div><div class="g_box" style="display: flex;
			justify-content: space-between;"><div><label class="lbl" for="img_orientation">Type :</label> <select class="orientation" id="img_orientation"><option value="l">linear</option><option value="r">circle</option><option value="e">ellipse</option><option value="c">conical</option></select></div><div><span id="img_angle_conf" style="display: inline-block;"><label class="lbl" for="img_angle">Angle :</label> <input id="img_angle" type="textbox" maxlength="3" size="4" value=""> </span><span id="img_xy_conf" style="display: inline-block; margin-left: 10px;"><div class="at-config-range2d-inputs"><div><div class="g-input-group"><label for="xpos">X:</label> <input id="xpos" value="50" type="number" min="0" max="100" size="3"> <span>%</span></div></div><div><div class="g-input-group"><label for="ypos">Y:</label> <input id="ypos" value="50" type="number" min="0" max="100" size="3"> <span>%</span></div></div></div></span></div></div></div><div id="at-mpreview-panel" class="at-mpreview-panel"><div class="p_col w-100 h-100"><div id="css_prev" class="h-100 p-relative"></div></div></div><div id="at-conf-panel" class="at-conf-panel"><div class="g_box_top"><div><label class="lbl" for="t_alpha">Alpha:</label> <input type="number" min="0" max="100" size="6" class="t_alpha w55" id="t_alpha" value=""></div><div><label class="lbl" for="t_loc">Location:</label><input type="number" min="0" max="100" size="6" id="t_loc" class="t_loc w55" value=""> <span class="lbl">%</span></div><div><button type="button" class="at-btn alpha_delete">Delete</button></div></div><div class="at-layer-range"><div class="at-config-range alpha-range" role="group"><input type="range" min="0" value="30" max="100"></div><div><div id="gradient" class="g_cont"><div id="s_bg" class="s_bg"></div></div></div><div class="at-config-range color-range" role="group"><input type="range" min="0" value="30" max="100"></div></div><div class="g_box_bottom"><div><label class="lbl" for="b_col">Color:</label> <input type="color" maxlength="7" size="6" class="b_col" id="b_col" value="#ffffff"></div><div><label class="lbl" for="b_loc">Location:</label> <input type="number" min="0" max="100" size="6" id="b_loc" class="b_loc w55" value=""> <span class="lbl">%</span></div><div><button type="button" class="at-btn color_delete">Delete</button></div></div></div><div id="at-generate-panel" class="at-generate-panel"><div class="g_box d-flex justify-content-evenly"><span><label class="lbl">Width :</label> <input class="w55" id="img_width" type="number" maxlength="4" size="4" value="300">&nbsp;px </span><span><label class="lbl">Height :</label> <input class="w55" id="img_height" type="number" maxlength="4" size="4" value="300">&nbsp;px</span></div><div class="d-flex justify-content-evenly mt-10"><button type="button" class="at-btn" id="generateimg_btn"><span class="at-ico">&#11123;</span> Download Image</button> <button type="button" class="at-btn" id="generatesrc_btn"><span class="at-ico">&#x2633;</span> Generate Source</button></div><div class="m-10"><a id="uniquelink" target="_blank">Save Link</a></div></div><div id="at-code-panel" class="at-code-panel"><div class="tab d-flex"><span data-name="#base64code" class="tab_head">Base 64 code</span> <span data-name="#csscode" class="tab_head hide">CSS code</span></div><div class="code"><textarea id="base64code" class="code_data code_base64" value="">Click Generate source button to get image code</textarea><pre id="csscode" class="code_data code_csslayer"><code>Multi layer gradient css code will display here after click on generate source button</code></pre></div></div></div></div></div></div></div></section>
			
			
			
			
			<script>document.write(atob("PHNjcmlwdCBkZWZlcj0iZGVmZXIiIHNyYz0iaHR0cHM6Ly9hbmdyeXRvb2xzLmNvbS9pbmNsdWRlL2pzL2F0LW1haW4uanM/MjE4MjAyMyI+PC9zY3JpcHQ+"));</script>

<br />

<div class="post">
    
    
    <h1>Gradient Image Generator</h1>
    <p>A gradient generator is a tool that allows you to create smooth color transitions or gradients. These gradients can be used as backgrounds, overlays, or design elements in various digital applications such as websites, graphics, and user interfaces.

<br>Gradient generator provide an interface where you can select or specify two or more colors. The tool then generates a smooth color transition between those colors, creating a gradient effect. 
<br><h2>Features of Gradient Maker</h2>
<ol>
        <li>
Color Selection: Ability to choose the starting and ending colors for the gradient, often with options to select from pre-defined palettes or enter specific color values.</li><br>
<li>Gradient Orientation: Options to set the direction of the gradient, such as linear (horizontal, vertical, diagonal) or radial.</li><br>
<li>Preview: Real-time visual preview of the generated gradient.</li><br>
<li>CSS/Code Output: Most gradient generators provide the CSS code or other format (e.g. SVG) to easily implement the gradient in web development or design projects.</li><br>
<li>Advanced Options: Some tools offer more complex features like multiple color stops, opacity adjustments, or the ability to create repeating gradients.</li><br>
<li>Gradient generators are useful for web designers, UI/UX designers, and anyone creating visual content that requires smooth color transitions. They simplify the process of generating gradients compared to manually coding the CSS or other gradient specifications.</li></p>
</ol>
<h2>Image Compressor</h2>    
   <p>If you need to reduce the size of the file your received from our gradient creator we recommend using <a href="https://www.4kdownload.com/products/imagecompressor">image compressor</a>.</p>
</div>  
</div></div>

































    <div class="bottom-ads">
         
    </div>

    
     
     <div class="hero">
    <div class="footer">
        
        
       
        
        
        
        
        <!-- Your footer content goes here -->
      
        </div>
         <div class="cri">
        <p>&copy; 2025 Free Gradient Image Generator & Maker
    </a></p>
    </div></div>
</body>
</html>






<button id="backToTopBtn" onclick="scrollToTop()">⬆</button>

    <script>
        // Show/hide the "Back to Top" button based on scroll position
        window.onscroll = function () {
            scrollFunction();
        };

        function scrollFunction() {
            var backToTopBtn = document.getElementById("backToTopBtn");

            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                backToTopBtn.style.display = "block";
            } else {
                backToTopBtn.style.display = "none";
            }
        }

        // Smooth scrolling to the top of the page
        function scrollToTop() {
            document.body.scrollTop = 0; // For Safari
            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
        }
    </script>

<script>
    
    document.addEventListener("DOMContentLoaded", function() {
  const pdfBackground = document.querySelector('.pdf-background');
  const wordBackground = document.querySelector('.word-background');
  const excelBackground = document.querySelector('.excel-background');
  const pptBackground = document.querySelector('.ppt-background');
  const imageBackground = document.querySelector('.image-background');

  function moveElement(element, startX, startY) {
    let angle = 0;
    const radius = 50;
    const speed = 0.005;

    function animate() {
      const x = startX + radius * Math.cos(angle);
      const y = startY + radius * Math.sin(angle);
      element.style.transform = `translate(${x}px, ${y}px)`;
      angle += speed;
      requestAnimationFrame(animate);
    }

    animate();
  }

  moveElement(pdfBackground, 20, 20);
  moveElement(wordBackground, 70, 50);
  moveElement(excelBackground, 40, 80);
  moveElement(pptBackground, 90, 30);
  moveElement(imageBackground, 10, 70);
});

    
</script>

<script>
  function toggleMenu() {
    var mainMenu = document.querySelector('.main-menu');
    var mobileMenu = document.querySelector('.mobile-menu');
    mainMenu.classList.toggle('show');
    mobileMenu.classList.toggle('show');
  }
</script>

</body>
</html>
