How can I create a smooth gradient border around a box with Tailwind CSS?
Asked on Sep 24, 2025
Answer
To create a smooth gradient border around a box using Tailwind CSS, you can utilize the `bg-gradient-to-*` utilities in combination with `border-transparent` to achieve the desired effect. Here's a simple example of how you can do this:
<!-- BEGIN COPY / PASTE -->
<div class="p-1 bg-gradient-to-r from-blue-500 to-green-500 rounded-lg">
<div class="bg-white border border-transparent rounded-lg p-4">
Content goes here
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- Wrap the inner content in a div with padding and a gradient background to simulate a gradient border.
- Apply `border-transparent` to the inner box to prevent any default border color from showing.
- Use `rounded-lg` to ensure the border and inner box have matching rounded corners.
- Adjust the gradient direction and colors using `bg-gradient-to-*` and `from-*`/`to-*` utilities as needed.
Recommended Links: