MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    CSS animated gradient in the background?

    Scheduled Pinned Locked Moved Development
    1 Posts 1 Posters 1.8k Views 1 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • pyrosmileyP Offline
      pyrosmiley
      last edited by

      I actually just made a comment explaining how I managed to get a CSS gradient in the background and not just the margins, but I’m still not quite where I want to be. I’m working on a vertical display board for the side of my fridge instead of a mirror, and it would be absolutely killer to have a slowly scrolling gradient, like the ones generated here and here (along with, I’m sure, a ton of other places!).
      My issue is though, while I can generate a static gradient that looks nice enough, I cannot for the life of me get it to animate. I have no idea why. Is this type of CSS animation just not doable in the MM framework, do I have to put it in its own <div> or something? I have no idea.
      Here’s the relevant part of my custom.css file:

      .region.fullscreen.below {
        background: linear-gradient(208deg, #235182, #196586);
        -webkit-animation: gradient 30s ease infinite;
        animation: gradient 30s ease infinite;
      
      @-webkit-keyframes gradient {
        0%{background-position:25% 0%}
        50%{background-position:76% 100%}
        100%{background-position:25% 0%}
        }
      @keyframes gradient { 
        0%{background-position:25% 0%}
        50%{background-position:76% 100%}
        100%{background-position:25% 0%}
        }
      }
      

      I’m not entirely sure what they do or what they’re called, but I’ve tried this with the @keyframes part inside and outside the .region element, above and below. Still nothing. :shruggie:
      If it’s possible, it seems like it’d be super cool. Maybe I could try and put it in a module based on the MMM-ProfilePicture module that I’ve been using until recently?
      Sorry if this is a dumb and obvious question, and also thanks!

      1 Reply Last reply Reply Quote 0
      • 1 / 1
      • First post
        Last post
      Enjoying MagicMirror? Please consider a donation!
      MagicMirror created by Michael Teeuw.
      Forum managed by Sam, technical setup by Karsten.
      This forum is using NodeBB as its core | Contributors
      Contact | Privacy Policy