Gradient

Gradient Border Generator

Create CSS gradient borders that work with rounded corners and copy the code.

Gradient

Why Use the Gradient Border Generator?

Most tricks for colorful outlines break on rounded corners, but this gradient border generator uses the padding-box and border-box double-background technique, so your border follows any border-radius cleanly. Choose two colors, an angle, a border width and a corner radius, then watch the preview card update. The output is plain CSS with no extra wrapper elements or pseudo-elements, which makes it a practical choice for developers styling cards, buttons, inputs and avatars.

How to Use the Gradient Border Generator

  1. Enter your two border colors with the pickers or by typing HEX, rgb(), hsl() or CSS color name values.
  2. Drag the angle slider to set which direction the gradient runs around the border.
  3. Adjust the border width slider for a hairline or a bold outline, then use the corner radius slider to round the corners of the preview card.
  4. Click Copy on the CSS output and apply it to your element, changing the inner fill layer to match your own card background if needed.

Best For

  • Highlighting the recommended plan on a pricing table with a rounded gradient outline.
  • Adding a branded gradient ring around profile pictures, avatars or story-style thumbnails.
  • Styling an outline button or a focused search input with a two-color edge instead of a flat border.
  • Framing feature cards on a dark landing page so they stand out without heavy shadows.

Pro Tip

The technique works by stacking two backgrounds: a solid fill clipped to the padding box sits on top of a gradient that fills the border box, and a transparent border lets the gradient show through around the edges. That means the inner fill must be a solid color, so set it to exactly the background color of the card. If you need a see-through center, switch to a mask-based or pseudo-element approach instead.

FAQ

Gradient Border Generator FAQ

How do I add a gradient border in CSS?

Give the element a transparent border, then set two background layers: a solid color with background-clip padding-box and a gradient with background-clip border-box. The solid layer covers the middle, so the gradient only shows through the transparent border. This approach respects border-radius and needs no extra HTML.

Why does border-image not work with border-radius?

When border-image is used, the browser draws the border from the image and ignores border-radius for the border itself, so the corners stay square. The background-clip method avoids this because the gradient is a background, and backgrounds follow rounded corners. That is why it is the usual choice for rounded gradient borders.

Can a gradient border have a transparent background?

Not with the padding-box and border-box method, because the inner solid layer is what hides the middle of the gradient. For a transparent center, developers typically use a pseudo-element with a CSS mask that cuts out the content area, or an inline SVG stroke. These options need more code but let the page background show through.

How thick should a gradient border be?

For interface elements such as cards and inputs, 1px to 3px usually looks refined, while 4px or more reads as a decorative frame. Thin borders show less of the gradient, so pick colors with a clear difference in hue or lightness if you want the blend to be noticeable. Thicker borders suit avatars and featured cards where the gradient is the focal point.

Learn more

Guides for the Gradient Border Generator

Development

CSS Gradient Borders: 3 Techniques That Work With Rounded Corners

Create a CSS gradient border that respects border-radius: border-image, the padding-box double background, and a mask trick for fully transparent centers.

Read Guide

Development

How to Create Animated Gradient Backgrounds in CSS

Build an animated gradient in CSS with background-position keyframes, calm timing, prefers-reduced-motion support, GPU-friendly layers and @property angles.

Read Guide

Related tools

Keep Exploring Color Tools

Browse all 34 free color tools

Gradient Generator Create smooth two-color linear gradients and copy the CSS in one click. Multi-Color Gradient Generator Build three-stop linear gradients with a middle color and copy-ready CSS. CSS Gradient Code Generator Generate linear, radial, and conic gradient CSS code with a solid-color fallback. Animated Gradient Generator Create animated CSS gradient backgrounds with keyframes and reduced-motion support. Color Picker Pick any color and instantly get HEX, RGB, HSL, HSV, and CMYK codes plus the nearest color name. Color Code Converter Paste a HEX, RGB, HSL, or CSS color name and convert it to every other color format. HEX to RGB Converter Convert HEX color codes to RGB and RGBA values with a step-by-step breakdown of the math. RGB to HEX Converter Turn red, green, and blue values into a HEX color code, including 3-digit shorthand.
Copied