Hubspot CSS Animated Gradient Guide
Modern websites often mirror the polished UI style seen in Hubspot landing pages, and a smooth CSS animated gradient is a powerful way to achieve that same on-brand, attention-grabbing look with minimal code.
This how-to article walks you through building a CSS-only animated gradient background from scratch, inspired by the techniques demonstrated on the official Hubspot animated gradient tutorial. You will learn how to write the CSS, structure your HTML, and adjust timing, colors, and performance for real-world use.
Why Use a Hubspot Style Animated Gradient?
A subtle animated gradient background can immediately make a page feel more dynamic and product-ready, similar to Hubspot marketing pages. Beyond aesthetics, it also helps:
- Draw focus to a hero section or call-to-action.
- Convey motion without heavy JavaScript.
- Reinforce brand palettes using soft transitions.
- Keep performance high with pure CSS techniques.
The effect is accessible, lightweight, and works well across modern browsers, provided you keep animations smooth and not overly distracting.
Core Concept Behind the Hubspot Gradient Effect
The approach showcased in the Hubspot example relies on animating the background-position of a large linear gradient. Instead of shifting multiple layers or using JavaScript, you:
- Create an element with a full-width, full-height background.
- Apply a multi-color linear gradient.
- Scale the gradient so its background size exceeds the element.
- Animate the gradient position across time using
@keyframes.
Because the browser only animates positions of a single background, the effect remains smooth and easy to maintain.
Setting Up the HTML Structure for a Hubspot Style Background
The HTML structure is very simple. You can dedicate a wrapper to the animated gradient and place your content inside.
<body>
<div class="gradient-bg">
<div class="content">
<h1>Your Headline</h1>
<p>Supportive text and a strong call-to-action.</p>
<button>Get Started</button>
</div>
</div>
</body>
You can adapt classes and structure to match your design system, but this pattern is close to what a product marketing team using Hubspot might use for a hero section.
Writing the CSS for a Hubspot Inspired Animated Gradient
The heart of the effect is the gradient layer and its animation. Below is a basic version that closely follows the logic from the Hubspot demo, while remaining easy to customize.
html, body {
height: 100%;
margin: 0;
}
.gradient-bg {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(-45deg,
#ee7752,
#e73c7e,
#23a6d5,
#23d5ab
);
background-size: 400% 400%;
animation: gradient-animation 15s ease infinite;
}
.content {
color: #ffffff;
text-align: center;
padding: 3rem;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
This simple block will give you a smooth, looping animation similar to what you see in the Hubspot tutorial, moving through four colors in a diagonal gradient.
Key CSS Properties Used in the Hubspot Technique
linear-gradient(): Defines the angle and color stops for the gradient.background-size: 400% 400%: Enlarges the gradient so panning reveals multiple color combinations.background-position: The animated property that moves the gradient horizontally.animation: Ties the gradient to the@keyframesdefinition and controls time and easing.
Matching these patterns allows you to recreate the recognizable flowing gradient often associated with high-quality SaaS landing pages like those built with Hubspot templates.
Step-by-Step: Build a Hubspot Style CSS Gradient
Use the following step-by-step process to implement the effect on your own site or application.
Step 1: Create the Layout Container
Start with a primary wrapper that will receive the animated background. Keep your layout flexible so content remains centered and readable.
<div class="gradient-bg">
<main class="content">
<h1>Build Better Experiences</h1>
<p>Design engaging interfaces powered by clean CSS.</p>
</main>
</div>
Step 2: Define a Multi-Color Gradient Palette
Choose colors that match your brand or your Hubspot workspace palette. Use three to five colors for smooth blending.
.gradient-bg {
background: linear-gradient(-45deg,
#ff9a9e,
#fad0c4,
#a18cd1,
#fbc2eb
);
}
Adjust angles and stops to emphasize specific hues. Negative angles can help create diagonally flowing patterns that feel more dynamic.
Step 3: Enlarge the Background for Motion
Next, scale the gradient beyond its default size. This gives enough room for the animation to pan smoothly.
.gradient-bg {
background-size: 400% 400%;
}
You can experiment with different background sizes, but a value around 300% to 500% generally works well and is consistent with examples like the Hubspot demo.
Step 4: Add the Gradient Animation
Finally, define your keyframes and tie them to the container using the animation property.
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.gradient-bg {
animation: gradient-animation 20s ease-in-out infinite;
}
The timing function and duration are up to you, but longer durations (15s–30s) usually feel closer to professional marketing experiences you see in tools such as Hubspot.
Customizing a Hubspot Inspired Gradient for Your Brand
Once the base effect is working, tailor it to your specific design guidelines.
Adjusting Colors and Stops
- Map colors to your brand primary and accent shades.
- Try more subtle changes for a calm background, or high contrast for energetic pages.
- Test combinations on light and dark foreground text.
Changing Animation Speed
To keep usability high, avoid rapid color shifts. Gradual movement similar to the Hubspot gradient article performs better in real scenarios.
- Slow (20s–40s): Ideal for hero sections and dashboards.
- Medium (10s–20s): Good for promotional blocks and banners.
- Fast (<10s): Use sparingly; can be distracting or tiring.
Adding Overlays and Content Styles
You can layer content over the gradient using semi-transparent cards or overlays:
.content {
background: rgba(0, 0, 0, 0.35);
border-radius: 1rem;
padding: 2.5rem 3rem;
max-width: 600px;
}
This ensures contrast and keeps text accessible while still showing off the animated background effect that recalls polished Hubspot layouts.
Performance and Accessibility Tips Inspired by Hubspot UX
Animated gradients are lightweight, but thoughtful configuration helps them scale to production sites and platforms such as Hubspot.
- Respect reduced motion preferences: Use
@media (prefers-reduced-motion: reduce)to disable or slow down the animation. - Check color contrast: Ensure foreground text meets WCAG contrast ratios against all gradient states.
- Test mobile devices: Verify the animation runs smoothly on lower-powered phones.
- Avoid overlapping heavy animations: Do not combine with many large GIFs or complex JavaScript animations on the same view.
@media (prefers-reduced-motion: reduce) {
.gradient-bg {
animation: none;
background-position: 50% 50%;
}
}
This pattern follows modern UX guidelines similar to those implemented by large platforms like Hubspot, ensuring inclusive experiences for all users.
Further Learning Beyond the Hubspot Gradient Example
To deepen your CSS animation skills, explore variations on this technique: experiment with radial gradients, layer multiple gradients, or combine subtle transforms on foreground elements. For ongoing optimization ideas and implementation help for complex marketing stacks that may integrate with Hubspot, you can also explore resources from specialist consultancies such as Consultevo.
By following these steps and patterns, you can confidently recreate and extend the animated gradient approach seen in the official Hubspot tutorial, giving your own pages a modern, engaging visual foundation powered entirely by CSS.
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.
“`
