CSS Gradient Border Generator

Create reusable gradient-border snippets for cards, buttons, and hero modules.

Background

Start color

End color

Angle

Thickness

Radius

Preview card

Gradient border ready

Use this pattern when plain borders feel flat but full gradients feel too loud.

CSS

.gradient-border {
  border: 2px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(135deg, #22c55e, #0ea5e9) border-box;
}