CSSグラデーションボーダージェネレーター
Create beautiful gradient borders using the border-image property. Adjust colours, width, radius and angle, then copy the CSS.
How It Works
- Choose gradient colors: Pick two or more colors for the border gradient using the color pickers.
- Set border width and radius: Adjust the border thickness and corner radius to match your design.
- Copy the CSS: The generated CSS using border-image or the pseudo-element technique is ready to paste into your stylesheet.
Why Use CSS Gradient Border Generator?
CSS gradient borders are a visually striking design detail used in modern UI frameworks, card components, button hover states, and highlighted sections. But standard CSS border only accepts solid colors — creating gradient borders requires a workaround using border-image or pseudo-element masking with clever background-clip tricks. This generator handles both techniques and outputs clean, copy-ready CSS so you can focus on design, not syntax.
Features
- Two implementation methods: Choose between border-image (simple) and the pseudo-element background-clip technique (supports border-radius).
- Border radius support: The pseudo-element method supports rounded corners that border-image cannot achieve.
- Multi-stop gradients: Add any number of color stops for complex rainbow or branded gradient effects.
- Live preview: See exactly how the border will look before copying the code.
- Angle control: Rotate the gradient direction with a visual angle picker.
Frequently Asked Questions
Why can't I use border-image with border-radius?
border-image replaces the border rendering entirely and ignores border-radius — the corners remain square. To combine gradient borders with rounded corners, use the pseudo-element technique: apply the gradient as a background on ::before and use background-clip: padding-box on the element itself.
Can I animate gradient borders?
Yes. Gradient borders created with the background + pseudo-element method can be animated by transitioning background-position on the gradient. Apply background-size: 300% 300% and animate background-position for a flowing effect.
Will this work on buttons and inputs?
Yes, the generated CSS works on any HTML element. For buttons, prefer the pseudo-element approach to maintain border-radius. For inputs, apply the border-image technique or wrap the input in a gradient container div.