Animate text-shadow color left to right CSS

Question

I have some text which already has a text-shadow, on hover I want the text-shadow color to transition horizontally similarly to this answer here:

https://stackoverflow.com/a/17212432/12278378

I don't think it makes a difference as this is a css question but I'm using react with styled-components.

Example:

.styled {
  background-color: black;
  font-size: 30px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.styled:hover {
  text-shadow: -1px -1px 0 cyan, 1px -1px 0 cyan, -1px 1px 0 cyan, 1px 1px 0 cyan;
}

<li class="styled">Test</li>

have you looked into `background-clip: text`? example: https://codepen.io/shshaw/pen/YpERQQ — Sigurd Mazanti, Jun 23 '22 at 22:40

Anton · Answer 1 · 2022-06-24T08:24:04.980

You can try to achieve this:

Set -webkit-text-stroke and -webkit-text-fill-color instead of text-shadow to get the border (shadow).
Create a pseudo-class and use attrs() to get the value from data attribute.
With background-clip our text is clipped and we place a gradient.
Use @supports to avoid if some browser doesn't support -webkit-text-stroke and -webkit-text-fill-color.

@supports (-webkit-text-stroke: 0 #000) and (-webkit-text-fill-color: #000) {
  .styled {
    display: flex;
    background-color: black;
    font-size: 5rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: sans-serif;
    
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: transparent;
  }
  .styled::after {
    content: attr(data-css); /* get value from html */
    position: absolute;
    top: 0;
    left: 0;
    font-size: inherit;
    transition: all .5s linear;
    
    background-image: linear-gradient(to left, white 50%, cyan 50%);
    background-size: 200%;
    background-position: 100%;
    background-clip: text;
    -webkit-background-clip: text;

  }
  .styled:hover::after {
    background-position: 0;
  }
}

@supports not ((-webkit-text-stroke: 0 #000) or (-webkit-text-fill-color: #000)) {
  .styled {
    background-color: black;
    font-size: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  }
  .styled:hover {
    text-shadow: -1px -1px 0 cyan, 1px -1px 0 cyan, -1px 1px 0 cyan, 1px 1px 0 cyan;
  }
}

<li class="styled" data-css="Test">Test</li>

Animate text-shadow color left to right CSS

1 Answers1