Is it possible based on CSS to create a circle with gradient border and transparent inner?
I think the best way is linear-gradient with SVG. The idea is to create a circle and fill its stroke with a gradient.
body {
background: url(https://picsum.photos/id/1026/800/800);
}
text {
font-size:8em
}
<svg viewBox='0 0 200 200' width=150 height=150>
<!-- define the gradient -->
<defs>
<!-- x1,y1,x2,y2 are used to define the gradient direction -->
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="60%">
<!-- start color at 0%-->
<stop offset="0%" stop-color="crimson"/>
<!-- end color at 100%-->
<stop offset="100%" stop-color="#f90"/>
</linearGradient>
</defs>
<!-- Create an svg circle at [100,100] with radius of 90
make the border-width 6 (stroke-width) fill it with gradient (stroke)
and make the content of circle transparent (fill)
--->
<circle cx="100" cy="100" r="90" stroke="url(#linear)" stroke-width="6" fill="transparent" />
<!-- Create a text element at the postion [70,140] -->
<text x="70" y="140" fill="white">7</text>
</svg>
How to apply linear gradient to the border of circle?
You can make the gradient circle as follows:
.rounded { width: 100px; height: 100px; border: 4px solid transparent; border-radius: 80px; background-image: linear-gradient(white, white), linear-gradient(to right, red, orange); background-origin: border-box; background-clip: content-box, border-box;}
<div class="rounded"></div>
Getting div border gradient to work on circular div
You can use SVG for this.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="200" height="200" preserveAspectRatio="none"> <defs> <linearGradient id="gradient"> <stop offset="0" style="stop-color:#ff0000" /> <stop offset="0.5" style="stop-color:#288feb" /> <stop offset="1" style="stop-color:#83eb8a" /> </linearGradient> </defs> <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" /></svg>
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.
Pure CSS gradient circle border
SVG
is the recommended way to create a circle shape and draw gradient outline / border around it.
SVG
has a circle
element that can be used to draw a circle shape. This shape can be filled and outlined with a solid color, gradient or pattern.
* {box-sizing: border-box;}
body { background: linear-gradient(#333, #999); text-align: center; min-height: 100vh; padding-top: 10px; margin: 0;}svg {vertical-align: top;}
<svg width="210" height="210"> <defs> <linearGradient id="grad1" x1="0" y1="1" x2="1" y2="0"> <stop offset="0" stop-color="#f5d700" /> <stop offset="1" stop-color="#0065da" /> </linearGradient> <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="0" x2="0" y2="1"></linearGradient> </defs> <g fill="none"> <circle cx="100" cy="100" r="95" stroke="url(#grad1)" stroke-width="2" /> <circle cx="100" cy="100" r="40" stroke="url(#grad2)" stroke-width="5" /> </g></svg>
How to make diagonal circle border gradient?
You can try something like this i have used a pseudo element with -ve z-index
Note: the background is not transparent as i have used a background-color
for inner element
.box { width: 250px; height: 250px; position: relative; margin: auto; margin: 30px; border-radius: 50%; background: #fff;}.box:after { content: ''; position: absolute; top: -15px; bottom: -15px; right: -15px; left: -15px; background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%); z-index: -1; border-radius: inherit;}
<div class="box"></div>
Related Topics
Less and Bootstrap: How to Use a Span3 (Or Spanx [Any Number]) Class as a Mixin
Using @Font-Face with Rails 3.1 App
Css: Constrain a Table with Long Cell Contents to Page Width
Webkit Transform Blocking Link
Creating a Droplet Like Border Effect in CSS
Issues with "Background-Position" in "Background" Shorthand Property
Using :Before CSS Pseudo Element to Add Image to Modal
Set Bootstrap Navbar Transparency on Scroll
Display Property Differences for Inline-*Something*
Ml-Auto Is Not Pushing Navbar Links to the Right
What Does This Symbol Mean in CSS
Select Specific Element Before Other Element
<!--[If Ie]> Conditional Comments Are Rendered HTML-Escaped in Facelets