×

HubSpot CSS Fade-In Guide

/ CRM, Hubspot / By

HubSpot CSS Fade-In Guide for Modern Websites

If you have ever admired the smooth on-page animations on a Hubspot style blog, you can recreate similar CSS fade-in effects on your own site using simple HTML, CSS, and a little JavaScript for scroll-based triggers.

This step-by-step tutorial is based on techniques demonstrated in the original CSS fade-in guide and adapts them into a practical workflow you can apply to landing pages, blog posts, and product sections.

Why Use HubSpot-Style CSS Fade-In Effects?

Subtle animation, like a HubSpot-inspired fade-in, can improve engagement when used sparingly and with purpose. Instead of overwhelming the visitor, the effect should gently draw attention to key content.

Well-implemented fade-in effects can:

  • Highlight important messages and calls-to-action.
  • Make long-form content feel more dynamic and scannable.
  • Guide the eye down the page in a natural way.
  • Improve perceived quality and professionalism of your brand.

The core idea is simple: elements start invisible and become visible either after a delay, on hover, or when they scroll into view.

Core Concept: How a HubSpot Fade-In Effect Works

The basic CSS fade-in pattern uses the opacity and transition or animation properties. While the HubSpot article shows several variations, they all share the same foundation.

At a high level, you will:

  1. Set an element to be initially transparent with opacity: 0;.
  2. Use a class and either transition or @keyframes to animate the element to opacity: 1;.
  3. Toggle the class using HTML states (like :hover) or JavaScript (for on-scroll effects).

Basic HubSpot-Inspired CSS Fade-In on Page Load

This version fades in an element automatically as soon as the page loads. It is the simplest version to implement and mirrors the approach described in the original HubSpot tutorial.

Step 1: Add the HTML Structure

Create a simple container and a content block you want to fade in:

<div class="fade-wrapper">
  <h2 class="fade-in">Welcome to My Page</h2>
  <p class="fade-in">This content will fade in on load.</p>
</div>

Step 2: Define the Fade-In Animation in CSS

The HubSpot example uses keyframes to handle the animation cleanly:

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Key points from this pattern:

  • opacity: 0; ensures the element starts invisible.
  • animation: fadeIn 1s ease-in forwards; triggers the animation once the page loads.
  • forwards keeps the final state (opacity: 1;) after the animation finishes.

Step 3: Add Delay for Staggered HubSpot-Like Effects

To reveal items one after another, apply different delays to each element, similar to techniques you would find in a HubSpot design system:

.fade-in:nth-of-type(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-of-type(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-of-type(3) {
  animation-delay: 0.6s;
}

This staggered approach works well for feature lists, step-by-step sections, or testimonial cards.

HubSpot Scroll Fade-In Effect with Intersection Observer

The HubSpot article also covers “fade-in on scroll,” where elements reveal themselves when they enter the viewport. For modern browsers, the Intersection Observer API is the preferred method.

Step 1: Mark Up Elements to Observe

Add a common class to each block that should fade in when it scrolls into view:

<section class="fade-section">
  <div class="fade-in-on-scroll">Section One</div>
  <div class="fade-in-on-scroll">Section Two</div>
  <div class="fade-in-on-scroll">Section Three</div>
</section>

Step 2: CSS for Hidden and Visible States

Unlike the automatic version, this HubSpot-style variant separates the base and active states into two classes:

.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

The small translateY shift gives the animation a smooth upward motion, which feels refined and similar to the motion design used on HubSpot pages.

Step 3: Use JavaScript to Toggle the Class

Now use Intersection Observer to add the is-visible class when the element appears in the viewport:

<script>
  const faders = document.querySelectorAll('.fade-in-on-scroll');

  const observerOptions = {
    threshold: 0.2
  };

  const fadeInOnScroll = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, observerOptions);

  faders.forEach(el => {
    fadeInOnScroll.observe(el);
  });
</script>

This logic observes each element once, then unobserves it after it becomes visible, preserving performance and mirroring best practices highlighted in the HubSpot tutorial.

Hover-Based HubSpot Fade-In Effects for UI Elements

HubSpot-style interfaces often use hover fade-ins for tooltips, overlays, or card details. This requires no JavaScript, only CSS.

Example: Image Overlay Fade-In on Hover

<div class="card">
  <img src="image.jpg" alt="Sample" />
  <div class="card-overlay">More details appear here.</div>
</div>

.card {
  position: relative;
  overflow: hidden;
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.card:hover .card-overlay {
  opacity: 1;
}

This kind of hover-driven fade-in provides clear, focused interactions that look polished and are in line with HubSpot design principles.

Accessibility and Performance Tips for HubSpot-Like Animations

Subtle animations are powerful, but you should implement them responsibly, just as major platforms like HubSpot do.

  • Respect reduced motion preferences: Use the prefers-reduced-motion media query to disable or simplify animations for users who request it.
  • Avoid animating large layout properties: Stick to opacity and transform, which are GPU-friendly.
  • Test on mobile devices: Heavy or constant animations can cause jank on low-powered phones.
  • Use animations sparingly: Overuse distracts from your content and weakens your marketing message.
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-on-scroll {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

Where to Use HubSpot Fade-In Patterns on Your Site

Here are a few high-impact placements for HubSpot-inspired fade-in effects:

  • Hero headlines and supporting subcopy.
  • Feature rows or product benefit sections.
  • Testimonial sliders and case study highlights.
  • Pricing tables and comparison grids.
  • Lead capture blocks and newsletter sign-up areas.

Limit animations to the most important sections so that motion supports the story rather than taking over the experience.

Next Steps After Implementing HubSpot CSS Fade-Ins

Once your fade-in effects are working smoothly, measure how they impact engagement metrics such as scroll depth, time on page, and click-through rate to key calls-to-action.

If you want expert help with optimization, check out Consultevo for broader guidance on performance, UX, and analytics that complement animation work inspired by HubSpot best practices.

For a deeper look at the original examples and code patterns, review the official HubSpot article on fade-ins here: HubSpot CSS Fade-In Tutorial. Combine these patterns with thoughtful content strategy and you will have pages that look refined, feel fast, and convert more visitors without overwhelming them.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights