How to Make a Gradient Border

Gradient borders

The border-image property can accomplish this. You'll need to specify border-style and border-width too.

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;

Read more on MDN.

How to get gradient border for my hr tag

These are answers of your question

hr{ background: red; /* For browsers that do not support gradients */ 

  background: -webkit-linear-gradient(left, red , yellow); /*For Safari 5.1 to 6.0 */

  background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */ 

  background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */ 

 background: linear-gradient(to right, red , yellow); /* Standard syntax */ }

.hr2{

    height: 25px;

    background: red; 

    background: -webkit-linear-gradient(red 50%, yellow 50%); 

    background: -o-linear-gradient(red 50%, yellow 50%); 

    background: -moz-linear-gradient(red 50%, yellow 50%);

    background: linear-gradient(red 50%, yellow 50%); 

}

<hr style="height:10px;">

<hr style="height:10px;" class="hr2">

4 gradient borders in CSS

Using background image: (produces the exact output as your image)

You seem to be having gradients that are different on each sides and so it is difficult to achieve this with the border-image property. You could try and mimic the behavior using background-image like in the below snippet.

Basically what the below snippet does is that it creates the gradient for each of the 4 sides as gradient background image strips and then uses background-position to place them on the correct location.

The transparent border on parent is a placeholder where the mimiced border would end up appearing. The background-origin: border-box makes the background of the element start from border-box area itself (and not padding-box or content-box). These two are just extra steps to avoid the usage of unnecessary calc stuff in the background-position.

.test {

  height: 250px;

  border: 2px solid transparent;

  background-image: linear-gradient(to right, rgb(187, 210, 224), rgb(203, 231, 190)), linear-gradient(to bottom, rgb(114, 191, 87), rgb(116, 191, 86)), linear-gradient(to left, rgb(204, 233, 187), rgb(187, 210, 224)), linear-gradient(to top, rgb(84, 144, 184), rgb(80, 138, 176));

  background-origin: border-box;

  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;

  background-position: top left, top right, bottom right, bottom left;

  background-repeat: no-repeat;

  padding-top: 50px;

}

<div class="test">

  This is a box and i want border for all the side

</div>

Outlined transparent button with gradient border in flutter

I spent about two hours on it :)

how to use:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                UnicornOutlineButton(
                  strokeWidth: 2,
                  radius: 24,
                  gradient: LinearGradient(colors: [Colors.black, Colors.redAccent]),
                  child: Text('OMG', style: TextStyle(fontSize: 16)),
                  onPressed: () {},
                ),
                SizedBox(width: 0, height: 24),
                UnicornOutlineButton(
                  strokeWidth: 4,
                  radius: 16,
                  gradient: LinearGradient(
                    colors: [Colors.blue, Colors.yellow],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                  child: Text('Wow', style: TextStyle(fontSize: 16)),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

and the class itself:

class UnicornOutlineButton extends StatelessWidget {
  final _GradientPainter _painter;
  final Widget _child;
  final VoidCallback _callback;
  final double _radius;

  UnicornOutlineButton({
    @required double strokeWidth,
    @required double radius,
    @required Gradient gradient,
    @required Widget child,
    @required VoidCallback onPressed,
  })  : this._painter = _GradientPainter(strokeWidth: strokeWidth, radius: radius, gradient: gradient),
        this._child = child,
        this._callback = onPressed,
        this._radius = radius;

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _painter,
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: _callback,
        child: InkWell(
          borderRadius: BorderRadius.circular(_radius),
          onTap: _callback,
          child: Container(
            constraints: BoxConstraints(minWidth: 88, minHeight: 48),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                _child,
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _GradientPainter extends CustomPainter {
  final Paint _paint = Paint();
  final double radius;
  final double strokeWidth;
  final Gradient gradient;

  _GradientPainter({@required double strokeWidth, @required double radius, @required Gradient gradient})
      : this.strokeWidth = strokeWidth,
        this.radius = radius,
        this.gradient = gradient;

  @override
  void paint(Canvas canvas, Size size) {
    // create outer rectangle equals size
    Rect outerRect = Offset.zero & size;
    var outerRRect = RRect.fromRectAndRadius(outerRect, Radius.circular(radius));

    // create inner rectangle smaller by strokeWidth
    Rect innerRect = Rect.fromLTWH(strokeWidth, strokeWidth, size.width - strokeWidth * 2, size.height - strokeWidth * 2);
    var innerRRect = RRect.fromRectAndRadius(innerRect, Radius.circular(radius - strokeWidth));

    // apply gradient shader
    _paint.shader = gradient.createShader(outerRect);

    // create difference between outer and inner paths and draw it
    Path path1 = Path()..addRRect(outerRRect);
    Path path2 = Path()..addRRect(innerRRect);
    var path = Path.combine(PathOperation.difference, path1, path2);
    canvas.drawPath(path, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => oldDelegate != this;
}

Is it possible to make a gradient border?

1.

Well.. this is no fancy css3 but heres one possible solution:

I made this example for something else before and i just changed the background url of #childWrap

http://jsfiddle.net/qD4zd/1/ ( note that the gradient isnt very flexible as it is done with images. )

Basic idea is that if you have element that you want to frame with a border with a gradient, pattern or just image you should wrap that element inside another which you will use as the border.

---

2.

A little more flexible gradient: Another thing you might want to try is http://www.css3pie.com and use the gradient background in outer element to create a border like in my example jsfiddle.

OR

http://www.colorzilla.com/gradient-editor/

( http://jsfiddle.net/qD4zd/2/ )

---

3.

On a third note.. The first method could be made into more flexible one by using actual <img> tag so that you force the image to be specific height and width.. could even look decent.

Gradient border on MUI component

This is how you add a gradient border to the button component:

V5

const options = {
  shouldForwardProp: (prop) => prop !== 'gradientColors',
};

const GradientButton = styled(
  Button,
  options,
)(({ theme, gradientColors }) => ({
  border: '5px solid',
  borderImageSlice: 1,
  borderImageSource: `linear-gradient(to left, ${gradientColors.join(',')})`,
}));

If you want a round button with gradient border, you can't use the code above since borderImage doesn't have a radius. A workaround is to create a gradient background in the child element :after because the background can be clipped using borderRadius:

const borderRadius = 15;
const RoundGradientButton = styled(
  Button,
  options,
)(({ theme, gradientColors }) => ({
  position: 'relative',
  border: '5px solid transparent',
  backgroundClip: 'padding-box',
  borderRadius,

  '&:after': {
    position: 'absolute',
    top: -5,
    left: -5,
    right: -5,
    bottom: -5,
    background: `linear-gradient(to left, ${gradientColors.join(',')})`,
    content: '""',
    zIndex: -1,
    borderRadius,
  },
}));

Usage

<GradientButton gradientColors={['red', 'yellow']} variant="contained">
  Default
</GradientButton>
<RoundGradientButton gradientColors={['red', 'yellow']} variant="contained">
  Default
</RoundGradientButton>

Live Demo

V4

const useStyles = makeStyles((theme: Theme) => ({
  button: {
    border: "6px solid",
    borderImageSlice: 1,
    borderImageSource: "linear-gradient(to left, red, orange)"
  }
}));

export default function ContainedButtons() {
  const classes = useStyles();

  return (
    <Button className={classes.button} variant="contained">
      Default
    </Button>
  );
}

Live Demo

Related Answer

• How to add linear-gradient color to MUI Chip background?

Possible to use border-radius together with a border-image which has a gradient?

Probably not possible, as per the W3C spec:

A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.

---

Related Topics