htmlfreecodes.
Menu

A good first building block

Make a CSS gradient background

Choose two colors and an angle to generate a linear-gradient declaration.

HTMLCSSJavaScriptNo dependencies
Edit in playground

Live preview

Explore the result below

HTML

<main><h1>Two colors, a new mood</h1><label for="start-color">First color</label><input type="color" id="start-color" value="#3658bf"><label for="end-color">Second color</label><input type="color" id="end-color" value="#b16fd8"><label for="gradient-angle">Angle</label><input type="range" id="gradient-angle" min="0" max="360" value="135"><p><output id="angle-output">135°</output></p><div id="gradient-preview" aria-label="Gradient preview"></div><label for="gradient-code">CSS to copy</label><textarea id="gradient-code" readonly rows="3"></textarea></main>
Read the complete HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{width:min(100%,480px);background:white;border-radius:20px;padding:24px}h1{font-size:24px;margin:0 0 16px}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid #afbddd;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #3658bf;outline-offset:3px}p{line-height:1.65}label{display:block;margin:16px 0 6px}input:not([type=checkbox]),select,textarea{max-width:100%;width:100%;padding:10px;border:1px solid #afbddd;border-radius:8px}button:disabled{opacity:.5;cursor:default}#gradient-preview{height:150px;border-radius:14px;border:1px solid #afbddd}input[type=color]{height:44px}
</style>
</head>
<body>
<main><h1>Two colors, a new mood</h1><label for="start-color">First color</label><input type="color" id="start-color" value="#3658bf"><label for="end-color">Second color</label><input type="color" id="end-color" value="#b16fd8"><label for="gradient-angle">Angle</label><input type="range" id="gradient-angle" min="0" max="360" value="135"><p><output id="angle-output">135°</output></p><div id="gradient-preview" aria-label="Gradient preview"></div><label for="gradient-code">CSS to copy</label><textarea id="gradient-code" readonly rows="3"></textarea></main>
<script>
const start=document.querySelector("#start-color"),end=document.querySelector("#end-color"),angle=document.querySelector("#gradient-angle"),preview=document.querySelector("#gradient-preview"),code=document.querySelector("#gradient-code");
function update(){const value="linear-gradient("+Number(angle.value)+"deg, "+start.value+", "+end.value+")";preview.style.background=value;code.value="background: "+value+";";document.querySelector("#angle-output").textContent=angle.value+"°";}
[start,end,angle].forEach(input=>input.addEventListener("input",update));update();
</script>
</body>
</html>

A little guide to making it yours

  1. Copy the code and save it in a file named example.html.
  2. Open the file in your browser to see the complete example.
  3. Change the text and structure in the HTML.
  4. Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

A CSS linear gradient is a generated image. Changing the angle changes its direction; color inputs supply explicit hex values. Select the generated declaration and copy it into your stylesheet. If you place text over the gradient, check contrast at every part behind the text rather than judging the colors alone.

Historical purpose: The stage-one 2014 archive recovery verified this exact detail purpose. This is an original modern implementation; no archived third-party code, credit link, remote script or guessed numeric preview mapping is reused.

Troubleshooting and limits

Native color controls may look different across browsers. The generated CSS uses linear-gradient, replacing the old proprietary IE filter. Test text contrast if you place content over the gradient; color alone should not convey meaning.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going