Text Highlighter

Generate highlighter effect CSS code

Highlight Your Text in Seconds Here

.highlight {
  margin: 0em -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  color: currentColor;
  background-image: linear-gradient(to right, #ffe1001a, #ffe100ae 4%, #ffe1004d);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Settings

Style

Color

Margin

Padding

Border Radius

.highlight {
  margin: 0em -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  color: currentColor;
  background-image: linear-gradient(to right, #ffe1001a, #ffe100ae 4%, #ffe1004d);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}