Double Gradients?

altimist-patrick · Jul 3, 2025

Hello,

I have a linear gradient which I quite like on a website. However, I don't like the sharp cutoff at the bottom. I know I have some options - I can extend the section so I never see the cutoff, or I can do a diagonal fade... but neither of these solutions are satisfactory...

Is there a way to create that smooth fading both top to bottom just like I have already implemented from right to left? I took a screenshot of what it looks like:

Screenshot-2025-07-03-160608 hosted at ImgBB

Image Screenshot-2025-07-03-160608 hosted on ImgBB

ibb.co

VBService · Jul 13, 2025

IMHO, you could make the main background a gradient that fades to the darker color towards the top right corner - where your menu is - so that area is already mostly the final gradient color. Then just give the menu a transparent background, and it will naturally blend with the gradient underneath. This way, you avoid any hard cutoff and keep things clean without needing diagonal fades or section tricks.

Go for something like this:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        --margin: 1em;

        margin: var(--margin);
        padding: 0;
        font: 400 .9rem/1 system-ui, monospace, sans-serif;
        height: calc(100vh - (2 * var(--margin)));
        background: linear-gradient(to top right, #fce4b5, #ffe4b5, #333);
        color: white;
      }
      .menu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 28px;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
      }
      .menu {
        position: fixed;
        top: 2em;
        right: 1em;
        width: 200px;
        background: none;
        display: flex;
        flex-direction: column;
        gap: 1em;
        transform: translateX(calc(100% + (2 * var(--margin))));
        opacity: 0;
        transition: all 300ms ease;
        z-index: 9999;
      }
      .menu a {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: bold;
      }
      .menu.open {
        transform: translateX(0);
        opacity: 1;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <button class="menu-toggle" id="menuToggle">☰</button>
    <nav class="menu" id="sideMenu">
      <button class="menu-toggle" id="menuClose">✕</button>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Projects</a>
      <a href="#">Contact</a>
    </nav>

    <script>
      const menuToggle = document.getElementById('menuToggle'),
            menuClose = document.getElementById('menuClose'),
            sideMenu = document.getElementById('sideMenu');

      menuToggle.addEventListener('click', () => {
        sideMenu.classList.add('open');
        menuToggle.classList.add('hide');
      });

      menuClose.addEventListener('click', () => {
        sideMenu.classList.remove('open');
        menuToggle.classList.remove('hide');
      });
    </script>
  </body>
</html>

New CSS features for smooth entry and exit animations	0	May 28, 2024
Slideshow not working properly	2	Jan 7, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How to create 2 sections side by side in header section?	0	Feb 7, 2020
Help with my responsive home page	2	Dec 14, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 24, 2022
blurry edge backgrounds by css	7	May 21, 2014
Javascript set language function issue	2	Nov 24, 2024

Double Gradients?

altimist-patrick

Screenshot-2025-07-03-160608 hosted at ImgBB

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads