Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] How to add gradient background to a section in GeneratePress?

Home Forums Support How to add gradient background to a section in GeneratePress?

  • This topic has 5 replies, 3 voices, and was last updated 3 years ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #418032

    Hello all!

    I am building a page with many sections (using the Sections plugin) and I’m trying to change the background for some of them to a gradient background, but I want to do it with CSS, not with an image.

    For this, I am using the gradient CSS code provided by

    background: #FF512F;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F09819, #FF512F);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F09819, #FF512F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    I would like to know how do I put this code with Simple CSS to make it work.
    Also, I imagine I have to set a Custom ID or Class for the specific sections I want to see changed, right?

    Thanks in advance for any help. GeneratePress has the most helpful community I have ever seen.

    GeneratePress 1.4
    GP Premium 1.4.3
    Customer Support

    Hi there,

    Try adding a custom ID to that section, like gradient-background, then this CSS should work:

    Then this should target the element: #gradient-background.generate-sections-container

    Let me know 🙂


    That worked perfectly Leo! Thank you very much!

    But I noticed that I had to “Update post” to see the new gradient background. If I pressed “Preview Changes” nothing would happened.

    So, I would like to leave my suggestion for Tom to include in the Simple CSS plugin the possibility of making code changes reflect when I simply press the Preview Changes Button.

    Thank you again and have a nice day!

    Customer Support

    Sections will getting a make over soon.

    I’ll make sure to mention it 🙂


    I was searching the same thing and found this post. Thank you Marco and Leo. I achieved what I wanted with your instruction.

    Thank GP.

    Customer Support

    Glad you found it helpful 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.