Gradient Borders in CSS
While it's a common understanding that traditional border strokes can't be directly applied in CSS, there's a clever workaround to achieve a gradient border effect.
The technique involves styling the pseudoclass ::before with a gradient background.
1.gradient-box,
2.gradient-box::before,
3.gradient-box > * {
4 position: relative;
5 border-radius: 8px;
6}
7.gradient-box::before {
8 position: absolute;
9 left: 0;
10 right: 0;
11 top: 0;
12 bottom: 0;
13 background: linear-gradient(
14 45deg,
15 red 0%,
16 orange 25%,
17 yellow 50%,
18 green 75%,
19 blue 100%
20 );
21 content: ' ';
22}
React component to have this gradient border
1export default function GradientBorder({
2 children,
3}: {
4 children: react.ReactNode;
5}) {
6 return (
7 <div className='flex flex-1 gradient-box p-[4px]'>
8 <div className='flex-1 bg-white p-4 z-20'>{children}</div>
9 </div>
10 );
11}
Demo
1export default function App() {
2 return (
3 <GradientBorder>
4 <>Hello World</>
5 </GradientBorder>
6 );
7}
