Looking to give your DIVI website's footer a modern makeover? This CSS snippet will transform your footer into a visually appealing section with a gradient background and interactive link effects. We'll guide you through each step to stylize your footer effectively.

#main-footer {

    background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);


#main-footer .footer-widget h4 {

    color: #ffffff;

    border-bottom: 2px solid #ffffff;


#main-footer a:hover {

    color: #ffdd00;

    transition: color 0.3s ease;


Breaking Down the Code:

#main-footer: Targets the main footer element for styling.

background: linear-gradient: Applies a linear gradient as the background of the footer, creating a modern, vibrant look.

#main-footer .footer-widget h4: Styles the footer widget headers with a specific color and a bottom border for a sleek appearance.

#main-footer a:hover: Adds a hover effect to links in the footer, changing the color and including a smooth transition effect for enhanced interactivity.

Implementation Steps:

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

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

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

Save Changes: Be sure to click "Save Changes" to apply the new footer style.

Your DIVI website's footer will now feature a stunning gradient background with elegant widget headers and interactive link effects. This simple yet effective CSS tweak can significantly enhance the visual appeal and user experience of your website's footer.

This customization is a great example of how small changes can make a big impact on your website's overall design and functionality.