DevToolBox

CSS Border Image Generator

グラデーションボーダーのCSS生成。リアルタイムプレビュー付き。

Preview Box

Standard Method (mask-composite)

.gradient-border {
  border: 8px solid transparent;
  border-radius: 12px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

Alternative Method (::before pseudo-element)

.gradient-border-alt {
  position: relative;
  border-radius: 12px;
  background: #1a1a2e;
  padding: 8px;
}

.gradient-border-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

CSS Border Imageの使い方

グラデーションボーダーを簡単に作成できます。 linear・radial・conicグラデーションに対応し、角度や色を自由に調整可能。 2つの実装方法を提供しているので、ブラウザ互換性に応じて選択できます。