Tips When Using in Divi

Gradient Background

Custom CSS for Divi Site-Wide Background

A linear gradient from darker blue-gray to deeper shades gives a professional, subtle look — similar to educate.io’s clean style. (educate.io)
Using fixed ensures the gradient doesn’t scroll with content (parallax-like effect).

🧱 Transparent Sections

Divi sections often default to white. This CSS forces them transparent so your gradient is visible site-wide.

🎨 Overlay (Optional)

Adds a dark semi-transparent layer for depth and improved text contrast.

Apply this CSS after you’ve set your hero section styles — it won’t override module backgrounds you add later.
Check mobile text colors — on dark gradients, lighter body text (#D1D5DB or similar) reads best.
You can tweak the gradient colors to fit your agency accent palette (e.g., soft blues or teals).

Custom CSS for Divi Site-Wide Background

Here’s a custom CSS snippet you can use in Divi to create a site-wide background similar to the style seen on educate.io — a rich dark gradient with subtle visual depth behind your content. (educate.io)

Since educate.io uses a hero section with a gradient forward look (dark base, soft color transitions — visible through inspecting the site design), this CSS gives you a fixed, smooth gradient background that stays behind your sections. (educate.io)

💻 Custom CSS for Divi Site-Wide Background

📌 Paste this into:

Divi → Theme Options → Custom CSS
or
Divi → Theme Customizer → Additional CSS

/* Site-wide gradient background */
body, html {
  height: 100%;
}

/* Base Gradient Background */
body {
  background: linear-gradient(
      135deg,
      #0a0f1a 0%,
      #111827 40%,
      #1c2029 100%
    ) fixed no-repeat center center / cover;
  background-attachment: fixed;
  z-index: -999;
}

/* Ensure all sections are transparent so the gradient shows through */
.et_pb_section, .et_pb_row {
  background: transparent !important;
}

/* Optional: subtle overlay for depth */
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: -998;
}

⚙️ How It Works