![]() We do this by extending the theme property by adding the following code in our file: module. The first thing we need to do is add support for the radial gradient. We need to do some configuration to add support for it instead. As you already know, Tailwind CSS doesn’t provide direct classes to create a radial gradient. Next, we’ll learn how to add radial background gradients in Tailwind CSS. You can see the background gradient with three color stops in action in this demo:īackground Gradient: More than Two color stops by Rishi Purwar ( CodePen. ![]() Let’s do this using our previous example. bg-gradient-to- classes to add a middle color. To create a basic gradient in Tailwind CSS, we need to use these three Tailwind CSS classes: Controlling the direction of the gradient But they’re not just for backgrounds anymore - we can add gradients to any element, including text, borders, cards, inputs, and so on!īefore diving into Tailwind CSS gradients and coding some pretty cool stuff, we need to understand the basics of Tailwind CSS gradients and how they work. Gradients are a great way to inject some extra vibrancy into your websites. How to animate gradients in Tailwind CSS.How to add border gradients in Tailwind CSS.Customizing Tailwind CSS gradients with more than two color stops.How to add linear background gradients in Tailwind CSS.Controlling the direction of the gradient.We’ll also walk through how to animate gradients in Tailwind CSS. In this blog, we’ll be using Tailwind CSS to create beautiful background, text, border, underline, and progress bar gradients. The stage's background-image will establish the belt and the linear-gradient () will define aspects. You’re in luck! I’ve recently been playing around with gradients in Tailwind CSS and thought it would be fun to write up a guide on how to add them. Since we're using gradients as the aspects, we can take advantage of CSS3 and utilize background-image: linear-gradient () to make the stage's background act as both the belt and aspects and avoid superfluous HTML. You can check out all my projects at /rishipurwar1 to learn more about what I do! A guide to adding gradients with Tailwind CSSĮditor’s note: This article was updated on 28 February 2023 to include additional Tailwind CSS gradient examples.Īre you looking for an in-depth guide on how to add gradients with Tailwind CSS? Maybe you want to create a beautiful text gradient for the hero section of your website or add an attractive border gradient for your site’s cards. Rishi Purwar Follow I'm an enthusiastic full-stack Web developer from India who has been building side projects for quite some time now.
0 Comments
Leave a Reply. |