#Rainbow font box generator#

Some of them will be shown in the Codepen to follow. Using this combination of background-image and background-clip property values, we can create countless variations of Rainbow texts. Conic ( Takes rotation angle and centre position as optional first arguments).

Radial ( Takes shape, size and position as optional first arguments).Linear (Takes direction as optional first arguments).The background-image property accepts the following types of gradients So our final CSS will be (along with other deemed-as-necessary adjustments) The rainbow pattern is there but we can’t really see it until we set the text’s own color as transparent. To be on the safe side, it’s probably best to futureproof it by including the unprefixed background-clip property as well. The -webkit-background-clip prefix is required by some modern browsers and supported by the remainder so it’s OK to just use the prefix if you want minimal CSS. Setting the background-clip property to text is non-standard but happens to be well supported in modern browsers, with the exceptions of IE and Opera Mini, which aren’t widely used. We don’t want the background gradient to cover the entire element background gradient, rather be clipped to the text. To give it a rainbow background, we will first give the whole element a background gradient.īackground-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red)

Let’s start writing basic HTML and CSS for building different types of Rainbow texts. Using different tricks, this pattern can be applied to any color property such as color, border, or shadow. Rainbow Text is a text with a color pattern associated with it, representing the 7 colors of Rainbow namely Violet, Indigo, Blue, Green, Yellow, Orange, and Red.

#Rainbow font box generator#

If you are interested in generating code for text with any gradient color, check out our CSS Text Gradient Generator tool. In this article, we’ll talk about what is a Rainbow text and demonstrate building one through a basic example.