Text highlight effects

In this effect, we use the border-radius to create something unusual.

https://css3effects.com/text-highlight

Code snippet

They are all <mark> tags but with different classes for demo purpose.

CSS

.demo-1 mark {
  /* No styles, default mark tag */
}

.demo-2 mark {
  border-radius: 30px;
}

.demo-3 mark {   
  background: rgba(255,255,0,.4);
  border-radius: 60px 5px;
  box-shadow: 0 0 10px yellow;
}

.demo-4 mark {
  background: linear-gradient(to bottom, transparent 60%, yellow 60%); 
}

.demo-5 mark {
  background: linear-gradient(to bottom, transparent 60%, yellow 60%); 
  border-radius: 50px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.