February 15, 2024

Create a CSS Text Color Animation similar to Apple

Play Video

Creating a CSS text color animation can significantly enhance the visual appeal of your website, making it more engaging for your visitors. Inspired by the animated text effects seen on tech giants like Apple and Google, this tutorial will guide you through creating a similar CSS text color animation with minimal code. This effect adds a subtle, yet captivating animation to your text, perfect for grabbing attention without overwhelming your audience.


Please make sure you have the following installed and activated:

  • Any theme or plugin to add custom CSS

Why CSS Text Animations Are Beneficial

CSS text animations can greatly enhance the user experience on a website by adding visual interest and guiding users’ attention to important content. Here are some reasons why incorporating CSS text animations can be beneficial:

  • Improved User Engagement
    Text animations can capture users’ attention more effectively than static text. By animating key phrases or headlines, you can make your content more engaging and increase the time users spend on your site.
  • Visual Appeal
    Animations add a layer of sophistication and modernity to your website’s design. A well-executed text animation can make your site look more professional and visually appealing, helping it stand out from competitors.
  • Highlighting Important Content
    You can use animations to highlight important messages, offers, or calls to action. This not only draws attention but can also improve conversion rates by focusing users on the actions you want them to take.
  • Enhanced Readability
    By controlling the pace at which text appears on the screen, animations can improve content readability. For instance, animating bullet points to appear one after the other can help users process information more easily.
  • Emotional Connection
    Animations can evoke emotions and create a mood that complements your website’s theme or message. For example, a gentle fading effect can convey a sense of calm, while a quick, zippy animation might project energy and excitement.

However, it’s important to use text animations judiciously. Overuse or poorly executed animations can be distracting, potentially harming user experience and accessibility. Always prioritize clarity and functionality, ensuring animations enhance rather than detract from your content and overall site usability.

Instructions for CSS Text Color Animation like Apple

  1. Select the text block you want to apply the effect, e.g. headline block, and click on “Edit with HTML”.
    Select the text block you want to apply the effect, e.g. headline block, and click on "Edit with HTML"
  2. Find the word you want to apply the effect on and wrap it in a span class, e.g. “gemini”:
    <h1>Welcome to the <span class="gemini">Gemini</span> Era</h1>

    Find the word you want to apply the effect on and wrap it in a span class

  3. Switch back to the visual edit mode and update your page.

    Note: As long as you have not added your custom CSS code, you should see no changes from before.

  4. Navigate to WP Dashboard > Appearance > Customize and then to Additional CSS.
    Navigate to WP Dashboard > Appearance > Customize and then to Additional CSS
  5. Copy & paste the following code:
    .gemini {
        background: radial-gradient(circle,dodgerblue,yellow);
        background-clip: text;
        color: transparent;
        animation: gemini 15s linear infinite;
        background-size: 200% 200%;
    @keyframes gemini {
            background-position: 0% 0%;
            background-position: 100% 100%;
            background-position: 0% 0%;
  6. Click on publish and preview the text animation.
    Click on publish and preview the text animation

Additional Documentation

CSS Text Color Animation like Apple – Conclusion

With just a few lines of CSS, you’ve learned how to add a dynamic and visually appealing text color animation to your website. This effect, reminiscent of the sophisticated animations seen on major tech platforms, is an excellent way to make your site feel more modern and engaging. Experiment with different colors and animation speeds to match the style of your website perfectly.

Credit to The Admin Bar
The Admin Bar is a resourceful platform dedicated to WordPress. From insightful videos on optimizing your WordPress tech stack to creative hacks for faster web page creation, the channel is a treasure trove for both beginners and advanced WordPress users.
Create a CSS Text Color Animation similar to Apple
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.