css Question posted in
Some basic documentation can be found here.

Css – How to create text highlight effect

Any suggestions on how i can create this text effect with html and css.
want to create this

Tried using mix-blend-mode but the background got inverted as well.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masked Text Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="masked-text">
        Customized solutions support product company success throughout company life cycle.
    </div>
</body>
</html>


.masked-text {
  width: 300px;
  overflow: hidden;
  
  position: relative
}

.masked-text::after {
  content: '';
  width: 20px;
  
  transform: rotate(15deg);
  background-color: orange;
  mix-blend-mode: difference;
  
  position: absolute;
  top: -10%;
  bottom: -10%;
  
}

code above looks like this

Tags:

3

Answers


  1. 0

    One way you could do this is with background-clip: text and a linear gradient with hard-stops. Here’s an example:

    Leave your html as is, but with CSS like so (no ::after element needed):

    .masked-text {
    width: 300px;
    overflow: hidden;
    
    position: relative;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-image: linear-gradient(110deg, black 8%, red 8%, red 14%, black 14%);
}

    The angle of the linear-gradient controls the angle of the colored section. The percentages used control the starting and ending points of the gradient, along with the width of the colored section.

    What’s nice about this approach is that you can have multiple sections that are colored, you explicitly control the color of the colored section instead of trying to find what the inverse would be, and you can animate movement of the gradient if desired.

    If you need to be able to do any shape instead of just straight lines through a linear-gradient (perhaps if you wanted to do the same effect, but with an svg), I imagine you could probably put the extra element shape behind the text, and set the text-fill-color to transparent, while setting a fill color for the div containing the text, although I haven’t tested that solution.

    Login or Signup to reply.
  2. 0

    That effect looks fire so I have added fire. So you can achieve that effect by mainly adding background-image to your text and few additional properties.

    I have added flaming effect to text, you can add whichever satisfies your requirement.

    Open in full view looks way better. Thank You.

    Codepen Link

    body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
}

.backgroundEffect{
  width: 50%;
  height: 300px;
}

h2{
  display: inline-block;
            margin: 0;
            font-size: 70px;
            background-image: url(
'https://images.pexels.com/photos/2543196/pexels-photo-2543196.jpeg?auto=compress&cs=tinysrgb&w=600');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text;
}
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<div class="backgroundEffect">
  <h2>Customized Solution for companyies and organization.</h2>
</div>
    Login or Signup to reply.
  3. 0

    The answer by @sam-sabin is completely correct if you want just a color overlay on the text.
    Only change you would need is to adjust the gradient parameters to position it at your desired location which looks more central.

    the values after the color passed in gradient signify where you want the color change to occur.

    .masked-text {
    width: 300px;
    overflow: hidden;
    
    position: relative;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-image: linear-gradient(110deg, black 0 45% , red 45% 55%, black 55% );
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masked Text Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="masked-text">
        Customized solutions support product company success throughout company life cycle.
    </div>
</body>
</html>

    output image

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

Back To Top
Search