I look at dozens, if not hundreds, of web pages a day, both as a developer and a web enthusiast. And I can confidently say that there’s a point where all of the websites look the same. The information on the page may stick, but the design itself is forgettable.
When crafting a page that people will remember, I try to find ways to incorporate movement. CSS animations are becoming more popular in web design, but using them on your page still feels like a fun novelty. If you’re looking to experiment with motion, I recommend creating an animated gradient with CSS.
An animated gradient creates a background that shifts through a spectrum of colors. It’s an eye-catching effect that creates a more dynamic experience for visitors. Below, I’ll share how to create this effect. Get ready to code along.
Table of Contents
- What We’re Building
- How to Create an Animated Gradient With CSS
- Tips for Making an Animated Gradient
What We’re Building
Throughout my journey in software development, I’ve noticed the power of learning through experience. So, let’s start with an example.
I want to build a website for a fictional cafe called Colorful Coffee. Vibrant colors and references to the rainbow are part of the company branding. This makes a CSS-animated gradient a natural fit for the page. The animated gradient not only adds visual appeal but also conveys a cool, modern aesthetic.
For the exercise below, you’ll need to use HTML and CSS. If you’re just starting your coding journey, check out our guide for new programmers.
How to Create an Animated Gradient With CSS
Before you begin adding your background, create a rough outline of your site. For our coffee shop example, I’ll start with some basic code that includes a heading for my site and a brief message to potential customers.
For a little styling. I’ll add a custom font and increase the size so that it’s easier to read. Beyond that, I’ll center my text and add margins so my message is easier to read.
Here’s what we have so far:
See the Pen css animated gradient: text by HubSpot (@hubspot) on CodePen.
Now, let’s add the animated background. To do so, we’ll make the following additions to our code.
- The background of the page is set to linear-gradient. Within that section, I specify the slant of the pattern (colors at a 45-degree angle). I also set the colors we’ll use in the background. I’ve picked five vibrant pastels, but you can use whatever colors you’d like.
- The animation element tells your machine that you want the gradient to move in 10-second loops. You can change the duration of time to meet your needs.
- Your keyframes control the intermediate steps in your animation, defining where you want colors to appear and when in the animation certain colors should occur. We're creating a dynamic shift in the background gradient, ensuring it remains attention-grabbing.
Here’s the CSS we’re going to add:
And here’s what the gradient looks like in action:
See the Pen css animated gradient: gradient by HubSpot (@hubspot) on CodePen.
Feel free to adjust styles or explore additional features to further enhance the visual appeal.
Tips for Making an Animated Gradient
1. Ensure smooth animation transitions.
When creating this coding exercise, I found that an effective animated gradient relies on smooth transitions. You need to define keyframes with careful consideration to achieve a seamless flow of colors.
Looking to alter the look? Adjust the percentage values and duration in the keyframes code above. You can then find the right balance to prevent jarring jumps in color that might distract users.
2. Play with color combinations.
Experimenting with diverse color combinations can significantly impact the overall feel of your animated gradient. Contrasting or complementary colors can add vibrancy. Pastels allow black text to pop, while darker hues contrast well with white text.
You can tailor the colors in your gradient based on your brand color scheme. Keep color psychology in mind, as it will help define the mood of your site.
3. Responsiveness matters.
Like all elements of your website, your colorful background needs to be responsive. This ensures that your content looks great on devices of all sizes.
To make sure the gradient adapts smoothly, you’ll need to rely on the background-size property. You can set your values to percentages instead of pixels to assist in your responsive design.
Adjust these values based on your design. You want to make sure your animated gradient remains captivating, whether viewed on a desktop, tablet, or smartphone.
Make an animated gradient with CSS.
Animated gradients are a canvas for expression, turning a static webpage into a dynamic visual experience. Experiment with these techniques to see what works best for your site. After all, the best sites have both functional code and a design that leaves a lasting impression.
