![]() ![]() ![]() To make the gradient cover the full width and height of your text field, set background-size: 100%, which is what I did in this example. In this example we'll use a linear gradient, which can be drawn this way:īackground-image: linear-gradient( 45 deg, #f3ec78, #af4261) To add a gradient overlay to a text element, we need to set three different CSS properties to the text we want to style: Adapt this to your needs.īonus: How to add a gradient overlay to text with CSS If you want a gradient from the top then before would be perfect. ::after vs :before: You could do this with a before but after feels right here.I understand…IE must be supported in some cases. The :: is supported above IE8 but if you need IE8 support you can’t use linear-gradient and thus all this is for not. after and before are examples of content whereas active or hover aren’t content. ::after vs :after: If you’re referring to content, :: should be used. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |