Home

Welcome to the Atom-d3e wiki!

https://barionleg.github.io/Atom-d3e/index.html

linear gradient css

body {
  width: 100vw;
  height: 100vh;
}
body {
  background: linear-gradient(
    to right,
    white 0% 1%,
    red 8% 14%,
    black 16% 20%,
    orange 22% 28%,
    black 30% 34%,
    yellow 36% 42%,
    green 44%, 50%,
    black 52% 56%,
    Cyan 58% 66%,
    black 68% 72%,
    blue 74% 80%,
    black 82% 86%,
    Indigo 88% 94%,
    white 96% 97%
  );
}

to play with in: https://developer.mozilla.org/fr/docs/Web/CSS/gradient/linear-gradient

https://developer.mozilla.org/en-US/play?id=aqU6sEtWAb53rwmttydAM3TrWZu3dndC8GAx9t4W0T4LbJIKUcp6MFswa8sDwnCQ1WuUbNJQ3cnXDWC4

---

---

-- <style> :root { --text-primary: #1b1b1b; --background-primary: #fff; } </style> <style> /* Legacy css to support existing live samples */ body { padding: 0; margin: 0; }   svg:not(:root) { display: block; }   .playable-code { background-color: #f4f7f8; border: none; border-left: 6px solid #558abb; border-width: medium medium medium 6px; color: #4d4e53; height: 100px; width: 90%; padding: 10px 10px 0; }   .playable-canvas { border: 1px solid #4d4e53; border-radius: 2px; }   .playable-buttons { text-align: right; width: 90%; padding: 5px 10px 5px 26px; } </style>     <style id="css-output"> body { width: 100vw; height: 100vh; } body { background: linear-gradient( to right, white 0% 1%, red 8% 14%, black 16% 20%, orange 22% 28%, black 30% 34%, yellow 36% 42%, green 44%, 50%, black 52% 56%, Cyan 58% 66%, black 68% 72%, blue 74% 80%, black 82% 86%, Indigo 88% 94%, white 96% 97% ); }   </style> <script> const consoleProxy = new Proxy(console, { get(target, prop) { if (typeof target[prop] === "function") { return (...args) => { try { window.parent.postMessage( { typ: "console", prop, args }, "*" ); } catch { try { window.parent.postMessage( { typ: "console", prop, args: args.map((x) => { try { window.structuredClone(x); return x; } catch { return { _MDNPlaySerializedObject: x.toString() }; } }), }, "*" ); } catch { window.parent.postMessage( { typ: "console", prop: "warn", args: [ "[Playground] Unsupported console message (see browser console)", ], }, "*" ); } } target[prop](...args); };   }   return target[prop];   },   });       window.console = consoleProxy;   window.addEventListener("error", (e) => console.log(e.error));   </script>                   <script type="">   ;   </script>   <script>   try {   window.parent.postMessage({ typ: "ready" }, "*");   } catch (e) {   console.error("[Playground] Failed to post ready message", e);   }   </script>        

---

---