# Gradient Border Technique for Tailwind CSS
A technique for creating refined gradient borders using box shadows instead of CSS borders. This approach allows borders to blend naturally with existing shadows for a modern, polished appearance.
## How It Works
Rather than using a `border`, layered box shadows with negative spread values create the border effect. This enables the border to merge cleanly with element shadows and produces a subtle gradient-like feel.
## Key Principles
1. **Box-sizing**: All elements use `border-box` (set globally).
2. **Background-clip**: Elements use `padding-box` to prevent background from bleeding under the border.
3. **Shadow spread**: Shadows use negative spread equal to the intended border width.
4. **Accessibility**: Windows high contrast mode falls back to real borders.
## Implementation
See `gradient-border.css` for the full implementation and `examples.html` for usage examples.
---
## `gradient-border.css` (CSS implementation)
```css
@import "tailwindcss";
@theme {
/* Custom shadow system for gradient borders */
--shadow-input:
0px 1px 0px -1px var(--tw-shadow-color),
0px 1px 1px -1px var(--tw-shadow-color),
0px 1px 2px -1px var(--tw-shadow-color),
0px 2px 4px -2px var(--tw-shadow-color),
0px 3px 6px -3px var(--tw-shadow-color);
--shadow-highlight:
inset 0px 0px 0px 1px var(--tw-shadow-color),
inset 0px 1px 0px var(--tw-shadow-color);
}
/* Base styles for gradient border technique */
@layer base {
* {
box-sizing: border-box;
}
/* Elements with borders use background-clip: padding-box */
.border,
input,
button,
select,
textarea {
background-clip: padding-box;
}
/* Fallback for Windows high contrast mode */
@media (forced-colors: active) {
.border,
input,
button,
select,
textarea {
border: 1px solid ButtonBorder;
box-shadow: none !important;
}
}
}
/* Utility classes for gradient borders */
@layer utilities {
.shadow-input {
box-shadow: var(--shadow-input);
}
.shadow-highlight {
box-shadow: var(--shadow-highlight);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Border Examples</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Include gradient-border.css here or link it */
* { box-sizing: border-box; }
input, button, select, textarea { background-clip: padding-box; }
@media (forced-colors: active) {
input, button, select, textarea {
border: 1px solid ButtonBorder;
box-shadow: none !important;
}
}
</style>
</head>
<body class="p-8 bg-gray-50">
<h1 class="text-2xl font-bold mb-8">Gradient Border Technique Examples</h1>
<!-- Input with gradient border effect -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">Input with Focus Ring</h2>
<div class="relative
before:pointer-events-none
focus-within:before:opacity-100
before:opacity-0
before:absolute
before:-inset-1
before:rounded-[11px]
before:border
before:border-blue-500
before:ring-2
before:ring-blue-500/20
before:transition
after:pointer-events-none
after:absolute
after:inset-px
after:rounded-[7px]
after:shadow-[inset_0px_0px_0px_1px_var(--tw-shadow-color),inset_0px_1px_0px_var(--tw-shadow-color)]
after:shadow-black/5
focus-within:after:shadow-blue-500/20
after:transition">
<input
placeholder="Add some text"
class="relative
text-sm
bg-white
placeholder:text-gray-400
px-3.5
py-2
rounded-lg
border
border-black/5
shadow-[0px_1px_0px_-1px_var(--tw-shadow-color),0px_1px_1px_-1px_var(--tw-shadow-color),0px_1px_2px_-1px_var(--tw-shadow-color),0px_2px_4px_-2px_var(--tw-shadow-color),0px_3px_6px_-3px_var(--tw-shadow-color)]
shadow-black/5
!outline-none"
/>
</div>
</div>
<!-- Button with gradient border -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">Button with Gradient Border</h2>
<button
class="relative
px-4 py-2
bg-gray-50
text-gray-900
rounded-lg
border border-black/5
shadow-[0px_1px_0px_-1px_var(--tw-shadow-color),0px_1px_1px_-1px_var(--tw-shadow-color),0px_1px_2px_-1px_var(--tw-shadow-color),0px_2px_4px_-2px_var(--tw-shadow-color),0px_3px_6px_-3px_var(--tw-shadow-color)]
shadow-black/5
hover:bg-gray-100
transition-colors">
Click me
</button>
</div>
<!-- Simple input -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">Simple Input</h2>
<input
type="text"
placeholder="Simple input"
class="px-4 py-2
rounded-lg
border border-black/5
shadow-[0px_1px_0px_-1px_var(--tw-shadow-color),0px_1px_1px_-1px_var(--tw-shadow-color),0px_1px_2px_-1px_var(--tw-shadow-color),0px_2px_4px_-2px_var(--tw-shadow-color),0px_3px_6px_-3px_var(--tw-shadow-color)]
shadow-black/5
bg-white"
/>
</div>
</body>
</html>