50 components available

Gradient Badge

Name: Gradient Badge
Uploaded: 2025-02-01T00:00:00.000Z
Description: A pill-shaped badge with animated gradient text and a soft glowing border.

February 2025

A pill-shaped badge with animated gradient text and a soft glowing border.

Where the real magic happens

Playground

<GradientBadge label="Where the real magic happens" />

Source Code

MUI

Tailwind

gradient-badge.tsx

1import { Box } from '@mui/system';
2import { keyframes } from '@mui/system';
3
4const gradientAnimation = keyframes`
5  0% {
6    background-position: 0% 50%;
7  }
8  50% {
9    background-position: 100% 50%;
10  }
11  100% {
12    background-position: 0% 50%;
13  }
14`;
15
16const borderGradientAnimation = keyframes`
17  0% {
18    background-position: 0% 50%;
19  }
20  50% {
21    background-position: 100% 50%;
22  }
23  100% {
24    background-position: 0% 50%;
25  }
26`;
27
28export interface GradientBadgeProps {
29  label?: string;
30}
31
32const GradientBadge = (props: GradientBadgeProps) => {
33  const { label = '' } = props;
34
35  return (
36    <Box
37      sx={{
38        borderRadius: '999px',
39        padding: '4px 14px',
40        background:
41          'linear-gradient(135deg, rgba(202,183,255,.04) 0%, rgba(255,155,197,.04) 50%, rgba(255,202,149,.04) 100%)',
42        boxShadow: '0 -4px 12px rgb(212 158 255 / 12%) inset',
43        fontSize: 14,
44        fontWeight: 400,
45        position: 'relative',
46        '&:before': {
47          content: '""',
48          background:
49            'linear-gradient(135deg, rgba(202,183,255,.2) 0%, rgba(255,155,197,.2) 50%, rgba(255,202,149,.2) 100%)',
50          backgroundSize: '200% 200%',
51          animation: `${borderGradientAnimation} 5s ease infinite`,
52          borderRadius: 'inherit',
53          position: 'absolute',
54          inset: 0,
55          mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
56          maskComposite: 'exclude',
57          padding: '1px',
58          pointerEvents: 'none',
59        },
60      }}
61    >
62      <Box
63        sx={{
64          backgroundImage:
65            'linear-gradient(135deg, #cab7ff 0%, #ff9bc5 50%, #ffca95 100%)',
66          backgroundSize: '200% 200%',
67          animation: `${gradientAnimation} 5s ease infinite`,
68          backgroundClip: 'text',
69          color: 'transparent',
70        }}
71      >
72        {label}
73      </Box>
74    </Box>
75  );
76};
77
78export default GradientBadge;

Random Sequence

Bars Loader