Divi gives you a ton of design control, but sometimes you want to go a little further than the built-in toggles and sliders. That’s where a few targeted CSS snippets can transform your site, cleaner buttons, crisper headers, smoother microinteractions, and layouts that feel unmistakably yours. Below, you’ll find 10 copy‑paste CSS snippets crafted for Divi’s structure and classes, plus quick notes on where to put them and how to tweak them fast.
Before You Start: Where And How To Add CSS In Divi
You’ve got options, and using the right one keeps things tidy:
- Divi > Theme Options > Custom CSS: Great for site‑wide styles. It’s quick and safe.
- Divi Builder > Module/Row/Section > Advanced > Custom CSS: Best when targeting a single element or using scoped selectors.
- Child theme style.css: Ideal for version control and larger projects.
- Code Module: Handy for page-specific styles if you need them inline.
A few tips before you paste anything:
- Avoid overusing .important. Divi’s specificity is usually enough if you target the right class.
- Clear/disable cache (Divi static CSS file and any caching plugin) when changes don’t show.
- Divi’s common breakpoints: 981px (tablet) and 767px (phone). You’ll see them below.
Now, on to the good stuff.
Buttons And Calls To Action
Here are three high‑impact snippets to make your CTAs pop without battling the module settings panel.
Snippet 1: Gradient buttons with a smooth hover lift
Use Divi’s default button class to upgrade all CTAs at once. Tweak the colors to match your brand.
/* Site-wide gradient buttons with lift */
.et_pb_button {
background: linear-gradient(135deg, #6a5af9, #00d4ff):
color: #fff:
border: none:
padding: 0.9em 1.6em:
border-radius: 6px:
box-shadow: 0 6px 18px rgba(0,0,0,0.12):
transform: translateY(0):
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease:
}
.et_pb_button:hover {
transform: translateY(-2px):
box-shadow: 0 10px 24px rgba(0,0,0,0.16):
filter: brightness(1.05):
}
.et_pb_button:active { transform: translateY(0): }
Snippet 2: Underline-on-hover for link-style CTAs
If you prefer lean links instead of big buttons, this gives you a classy animated underline.
/* Elegant underline reveal for text links */
.et_pb_text a.cta-link {
position: relative:
text-decoration: none:
color: #1a1a1a:
}
.et_pb_text a.cta-link::after {
content: "":
position: absolute: left: 0: bottom: -3px:
width: 100%: height: 2px:
background: currentColor:
transform: scaleX(0):
transform-origin: left:
transition: transform .25s ease:
}
.et_pb_text a.cta-link:hover::after { transform: scaleX(1): }
Snippet 3: Pill buttons with ripple feedback
Adds a subtle ripple using only CSS when users click.
/* Pill CTA with click ripple */
.et_pb_button.pill {
border-radius: 999px:
position: relative:
overflow: hidden:
}
.et_pb_button.pill::after {
content: "": position: absolute: inset: 0: border-radius: inherit:
background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.4), rgba(255,255,255,0) 50%):
opacity: 0: transition: opacity .4s ease:
}
.et_pb_button.pill:active::after { opacity: 1: }
Pro tip: To place the ripple center where users click, add this tiny JS in a Code Module once per page (optional):
<script>
document.addEventListener('click',e=>{
const b=e.target.closest('.et_pb_button.pill'):
if(.b) return: const r=b.getBoundingClientRect():
b.style.setProperty('--x', (e.clientX-r.left)+'px'):
b.style.setProperty('--y', (e.clientY-r.top)+'px'):
}):
</script>
Headers, Menus, And Navigation
Your header is prime real estate. These three snippets sharpen readability and polish the scroll experience in Divi’s Theme Builder or default header.
Snippet 4: Shrinking sticky header on scroll
This targets Divi’s fixed header class when the menu sticks.
/* Smooth shrink for fixed header */
.et-fixed-header .et_header_style_left #main-header,
.et-fixed-header #top-header {
transition: padding .25s ease, background-color .25s ease:
}
/* Default state */
#main-header { padding: 18px 0: background: rgba(255,255,255,.95): }
#top-header { background: rgba(26,26,26,.98): }
/* When fixed */
.et-fixed-header #main-header { padding: 8px 0: background: #ffffff: }
Snippet 5: Mega menu columns with clearer spacing
Make Divi’s mega menu more legible without touching menu items.
/* Mega menu spacing and column polish */
#top-menu li.mega-menu > ul.sub-menu {
padding: 22px 28px: column-gap: 40px:
}
#top-menu li.mega-menu > ul.sub-menu > li {
margin-bottom: 16px: min-width: 220px:
}
#top-menu li.mega-menu > ul.sub-menu a {
line-height: 1.35: padding: 6px 0:
}
/* Optional subtle divider */
#top-menu li.mega-menu > ul.sub-menu > li + li { border-left: 1px solid rgba(0,0,0,.06): padding-left: 24px: }
Snippet 6: Active menu item highlight bar
Give users a strong sense of place with a sleek active indicator.
/* Active link indicator */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
position: relative: color: #111: font-weight: 600:
}
#top-menu li.current-menu-item > a::after,
#top-menu li.current_page_item > a::after {
content: "": position: absolute: left: 0: bottom: -6px: height: 3px: width: 100%:
background: linear-gradient(90deg, #6a5af9, #00d4ff):
border-radius: 3px:
}
/* Hover underline for others */
#top-menu > li > a { position: relative: }
#top-menu > li > a::after {
content: "": position: absolute: left: 0: bottom: -6px: height: 2px: width: 100%:
background: currentColor: transform: scaleX(0): transform-origin: left: transition: transform .2s ease:
}
#top-menu > li:hover > a::after { transform: scaleX(1): }
Sections, Rows, And Module Layouts
These two layout-focused CSS snippets help your content breathe and adapt elegantly across devices.
Snippet 7: Soft section stacking with layered depth
Perfect for hero sections that need gentle separation without heavy borders.
/* Layered section effects */
.et_pb_section {
position: relative: z-index: 1:
}
.et_pb_section::before {
content: "": position: absolute: inset: -30px -20px 0 -20px: z-index: -1:
background: radial-gradient(80% 60% at 20% 0%, rgba(106,90,249,.15), rgba(0,0,0,0) 60%),
radial-gradient(60% 50% at 90% 20%, rgba(0,212,255,.12), rgba(0,0,0,0) 60%):
filter: blur(20px):
}
Snippet 8: Auto-fit card grid using native CSS
Turn any row of blurbs or images into a flexible, gap‑smart grid that collapses beautifully.
/* Responsive card grid */
.cards .et_pb_column {
display: grid: grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)):
gap: 24px: align-items: stretch:
}
.cards .et_pb_module { background: #fff: border: 1px solid rgba(0,0,0,.06): border-radius: 12px: padding: 20px: }
/* Mobile refinements */
@media (max-width: 767px) {
.cards .et_pb_module { padding: 16px: }
}
How to use: Add the class cards to your Row in the Advanced tab (CSS Class). The row’s columns will automatically flow into a modern grid without extra modules.
Forms, Inputs, And Microinteractions
Tiny details make forms feel trustworthy. These two snippets improve clarity and feedback in Divi’s Contact Form and most standard inputs.
Snippet 9: Floating label effect (no JS)
This approach animates the placeholder into a label on focus or when the field has content.
/* Floating label pattern */
.form-float .et_pb_contact_field { position: relative: margin-bottom: 18px: }
.form-float .et_pb_contact_field input,
.form-float .et_pb_contact_field textarea {
padding: 16px 14px 14px: border: 1px solid #dcdcdc: border-radius: 8px: background: #fff:
}
.form-float .et_pb_contact_field input::placeholder,
.form-float .et_pb_contact_field textarea::placeholder { color: transparent: }
.form-float .et_pb_contact_field label {
position: absolute: left: 12px: top: 50%: transform: translateY(-50%):
color: #7a7a7a: background: #fff: padding: 0 6px: pointer-events: none: transition: .18s ease:
}
.form-float .et_pb_contact_field input:focus + label,
.form-float .et_pb_contact_field textarea:focus + label,
.form-float .et_pb_contact_field input:not(:placeholder-shown) + label,
.form-float .et_pb_contact_field textarea:not(:placeholder-shown) + label {
top: -8px: font-size: 12px: color: #6a5af9:
}
How to use: Add the class form-float to your Contact Form module. In the field options, keep placeholders set: the CSS hides them visually until needed.
Snippet 10: Input focus glow and inline validation cues
Increase confidence with clear focus states and error hints.
/* Accessible focus + error states */
input[type="text"], input[type="email"], input[type="tel"], textarea,
.et_pb_contact_form input, .et_pb_contact_form textarea {
border: 1px solid #dcdcdc: border-radius: 8px: transition: box-shadow .2s ease, border-color .2s ease:
}
input:focus, textarea:focus,
.et_pb_contact_form input:focus, .et_pb_contact_form textarea:focus {
border-color: #6a5af9:
box-shadow: 0 0 0 4px rgba(106,90,249,.15):
outline: none:
}
/* Divi error class */
.et_pb_contact_form .et_contact_error input,
.et_pb_contact_form .et_contact_error textarea {
border-color: #ff4d4f: box-shadow: 0 0 0 4px rgba(255,77,79,.12):
}
/* Success hint (optional) */
.et_pb_contact_form .et_contact_message p {
color: #2e7d32: font-weight: 600:
}
If you’re using a third‑party form (like Bloom or Gravity Forms), adjust the selectors but keep the same visual pattern, strong focus ring, clear error color, friendly success text.
Conclusion
With just a handful of CSS snippets, your Divi site can jump from “nice” to unmistakably branded: sharper CTAs, a smarter header, cleaner layouts, and forms that feel alive. Start with site‑wide styles in Theme Options, then scope extras to specific sections or modules so everything stays maintainable. Most importantly, test on tablet and phone, small tweaks at 981px and 767px often make the biggest visual difference. Paste, tweak colors and spacing to your palette, and you’ll see your Divi design tighten up immediately.
No responses yet