rainbow.scss
@mixin rainbow() {
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
p {
@include rainbow();
}
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta congue nulla feugiat bibendum. Nullam bibendum arcu ut pulvinar pellentesque. Morbi erat libero, auctor in tellus eget, dictum pulvinar neque. Maecenas eu tincidunt sapien. Suspendisse sem quam, mattis a justo ac, rutrum tempor arcu. Mauris massa lacus, interdum id egestas ac, rutrum faucibus felis. Phasellus congue sem tortor, et volutpat ante tristique a. Aenean ante sem, mattis in fringilla sed, iaculis non mauris. Duis eget.