Are you looking to add a touch of visual flair to your DIVI website? With a bit of custom CSS magic, you can transform your header into a stunning centerpiece. In this quick guide, we'll walk you through a simple yet impactful CSS code snippet to modify the DIVI header and change the color gradient.

#main-header {

    background: linear-gradient(70deg, #FFA500 0%, #FF0000 100%)!important;

}{codeBox}


Breaking Down the Code:


#main-header: This targets the main header element in your DIVI theme, allowing you to specifically customize its appearance.

background: linear-gradient(70deg, #FFA500 0%, #FF0000 100%)!important;

linear-gradient: This CSS property creates a gradient effect. The "70deg" sets the angle of the gradient to 70 degrees, providing a dynamic and visually appealing color transition.

#FFA500 and #FF0000: These are hex color codes, representing the starting and ending colors of the gradient. Feel free to replace these with your preferred colors by changing the hex codes.

!important: This ensures that your custom gradient overrides any default styles, making your modifications take precedence.

Implementation Steps:


Accessing the DIVI Theme Options:In your WordPress dashboard, navigate to "Divi" and click on "Theme Options."

Accessing the Custom CSS Box:Scroll down to the "General" tab and find the "Custom CSS" box.

Adding the Code:Copy and paste the provided CSS code snippet into the "Custom CSS" box.

Save Changes:Click on the "Save Changes" button to apply your modifications.
Result:

Your DIVI header will now showcase a vibrant gradient, seamlessly blending from the specified starting color to the ending color. Experiment with different hex codes to achieve the perfect color combination that complements your website's aesthetic.

By incorporating this straightforward CSS customization, you can elevate the visual appeal of your DIVI header and make a lasting impression on your site visitors. Enjoy the creative journey of transforming your website with personalized touches!