Question 401538 in Html Question posted in
Some basic documentation can be found here.

Html – How to change font color in the middle of a letter and match it with background colors?

I want to make text that changes its color in the middle of a word, in fact in the middle of a letter. I got it to work, but I also want to add a background color that changes in the same place. The issue is that I’ve used background image with a gradient to have the text colors change.

This is what I have so far with Tailwind CSS:







<script src="https://cdn.tailwindcss.com"></script>

<span class="bg-[linear-gradient(to_right,black_23%,pink_23%)] bg-clip-text text-[100px] text-transparent">powered</span>
Tags:

2

Answers


  1. 0

    HTML Structure:

    <span class="relative inline-block text-4xl text-transparent bg-clip-text bg-gradient-to-r from-black to-pink">
  <span class="absolute inset-0 bg-gradient-to-r from-black to-pink" style="background-clip: text; -webkit-background-clip: text;">powered</span>
</span>

    Explanation:

    1.Use text-transparent to make the text color transparent.
    2.Apply a gradient background with bg-gradient-to-r and bg-clip-text to make the gradient appear on the text.
    3.The relative and absolute classes ensure the gradient background covers the text properly.

    Login or Signup to reply.
  2. 0

    I would advice you to use some custom CSS along with Tailwind CSS in order to achieve both text color and background color changes.

    You’ve already used bg-clip-text and gradient background to change the text color in the middle.
    Now I would suggest that in order to have the background color change at the same position, you need to use a similar gradient but applied to the background of the text.

    I am listing down one code snippet, you can take a reference from this code.

    <span class="relative inline-block text-[100px] text-transparent bg-clip-text bg-[linear-gradient(to_right,black_23%,pink_23%)]">
    <span class="absolute inset-0 bg-[linear-gradient(to_right,black_23%,pink_23%)] bg-clip-padding">
        powered
    </span>
    <span class="opacity-0">powered</span>
</span>

    I hope this will resolve your query.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search