Tengo el siguiente CSS:
a.btn.white-grad {
background: $lgrey;
color: #313149 !important;
border: 1px solid #000;
border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
border-image-slice: 20;
float: left;
@include font-size(26);
margin: 75px 0;
}
Agregar border-radius: 5px
no parece hacer nada. Pensé que es porque estoy usando un degradado de borde... ¿hay alguna manera de lograr el radio de borde deseado de 5px?
2024 : si quieres transparencia , recomiendo usar el método de máscara CSS ya que el soporte es bastante bueno ahora
No se puede utilizar border-radius
con degradado. Aquí hay otra idea en la que puede confiar en múltiples antecedentes y ajustar background-clip
:
.white-grad {
background:
linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/
linear-gradient(to right, #9c20aa, #fb3570) border-box;
color: #313149;
padding: 10px;
border: 5px solid transparent;
border-radius: 15px;
display: inline-block;
margin: 75px 0;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad"> Some long long long text here</div>
<div class="white-grad"> Some long long <br>long text here</div>
Método de máscara CSS
Aquí hay una idea diferente con CSS usando mask
donde tendrás transparencia y también será responsivo:
Mostrar fragmento de código
.white-grad {
color: #313149;
padding: 10px;
display: inline-block;
margin: 75px 0;
position: relative;
z-index: 0;
}
.white-grad:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: 5px;
border-radius: 15px;
background: linear-gradient(to right, #9c20aa, #fb3570);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad"> Some long long long text here</div>
<div class="white-grad"> Some long long <br>long text here</div>
Con las variables CSS, podemos facilitar el ajuste:
Mostrar fragmento de código
.white-grad {
--b:5px; /* border width*/
--r:15px; /* the radius */
color: #313149;
padding: calc(var(--b) + 5px);
display: inline-block;
margin: 75px 0;
position:relative;
z-index:0;
}
.white-grad:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: var(--b);
border-radius: var(--r);
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
body {
background:#f2f2f2;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad" style="--r:20px;--b:10px;--c:linear-gradient(140deg,red,yellow,green)"> Some long long long text here</div>
<div class="white-grad" style="--r:30px;--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"> Some long long <br>long text here</div>
<div class="white-grad" style="--r:40px;--b:20px;--c:conic-gradient(black,orange,purple)"> Some long long <br>long text here<br> more and more more and more</div>
Pregunta relacionada para obtener un efecto diferente: ¿Cómo se aplica un degradado de exterior a interior, solo a los bordes, en CSS?
Los ejemplos anteriores cubren también la forma del círculo:
Mostrar fragmento de código
.white-grad {
--b:5px; /* border width*/
color: #313149;
display: inline-block;
margin: 10px;
width: 150px;
aspect-ratio: 1;
position: relative;
z-index: 0;
}
.white-grad:before {
content:"";
position:absolute;
z-index:-1;
inset: 0;
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
padding: var(--b);
border-radius: 50%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
body {
background:#f2f2f2;
}
<div class="white-grad"></div>
<div class="white-grad" style="--b:10px;--c:linear-gradient(140deg,red,yellow,green)"></div>
<div class="white-grad" style="--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"></div>
<div class="white-grad" style="--b:20px;--c:conic-gradient(black,orange,purple)"></div>
Pregunta relacionada en caso de que quieras aplicar una animación al borde: Botón con fondo transparente y borde degradado giratorio
También diferentes formas de radio:
Mostrar fragmento de código
.white-grad {
--b:5px; /* border width*/
color: #313149;
display: inline-block;
margin: 10px;
width: 150px;
aspect-ratio: 1;
position: relative;
z-index: 0;
}
.white-grad:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
padding: var(--b);
border-radius: var(--r,50%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
body {
background:#f2f2f2;
}
<div class="white-grad" style="--r:50% 0 50% 50%;"></div>
<div class="white-grad" style="--b:10px;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"></div>
<div class="white-grad" style="--b:8px;--r:50% 0 0;--c:linear-gradient(-40deg,black 50%,blue 0)"></div>
<div class="white-grad" style="--b:20px;--r:50% 50% 0 0;--c:conic-gradient(black,orange,purple)"></div>
y diferente grosor de borde:
Mostrar fragmento de código
.white-grad {
--b:5px; /* border width*/
color: #313149;
display: inline-block;
margin: 10px;
width: 150px;
aspect-ratio: 1;
position: relative;
z-index: 0;
}
.white-grad:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: var(--c,linear-gradient(#9c20aa, #fb3570));
padding: var(--b);
border-radius:var(--r,50%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
body {
background:#f2f2f2;
}
<div class="white-grad" style="--b:0 0 20px 20px;--r:50% 0 50% 50%;"></div>
<div class="white-grad" style="--b:10px 0 10px 0;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"></div>
<div class="white-grad" style="--b:8px 0px 0px 8px;--r:50% 0 0;--c:linear-gradient(40deg,black 50%,blue 0)"></div>
<div class="white-grad" style="--b:20px 20px 0 20px;--r:50% 50% 0 0;--c:conic-gradient(pink,orange,red,pink)"></div>
método SVG
También puedes considerar SVG como a continuación:
Mostrar fragmento de código
svg {
width:200px;
height:100px;
margin:10px;
}
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#9c20aa" offset="0"/>
<stop stop-color="#fb3570" offset="1"/>
</linearGradient>
</defs>
<rect x="5" y="5" height="100%" width="100%" style="width:calc(100% - 10px);height:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/>
</svg>
Que puedes aplicar como fondo:
Mostrar fragmento de código
.white-grad {
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>');
color: #313149;
padding:25px;
border-radius:15px;
display:inline-block;
margin: 75px 0;
}
body {
background:yellow;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad"> text very loooooooooooong here</div>
Y de la misma manera que mask
puedes obtener el degradado fuera del SVG:
Mostrar fragmento de código
.white-grad {
color: #313149;
padding: 25px;
border-radius: 15px;
display: inline-block;
margin: 75px 0;
background-size: 0 0;
position: relative;
z-index: 0;
}
.white-grad::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: inherit;
background-size: auto;
--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="white"/></svg>');
-webkit-mask: var(--mask);
mask: var(--mask);
}
body {
background: yellow;
}
<div class="white-grad" style="background-image:linear-gradient(to right,blue,red)"> Some text here</div>
<div class="white-grad" style="background-image:linear-gradient(black,lightblue,green)"> text very loooooooooooong here</div>
<div class="white-grad" style="background-image:radial-gradient(blue,pink)"> text very<br> loooooooooooong here</div>
También puedes usarlo como elemento común y considerar position:absolute
colocarlo alrededor del texto:
Mostrar fragmento de código
.white-grad {
color: #313149;
padding: 25px;
border-radius: 15px;
display: inline-block;
margin: 75px 0;
position:relative;
z-index:0;
}
.white-grad > svg {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
body {
background: yellow;
}
.hide {
height:0;
width:0;
}
<svg class="hide" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" id="border" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg>
<div class="white-grad">
<svg xmlns="http://www.w3.org/2000/svg">
<use href="#border" />
</svg>
Some text here</div>
<div class="white-grad">
<svg xmlns="http://www.w3.org/2000/svg">
<use href="#border" />
</svg>
text very loooooooooooong here</div>
2023: elemento único, sin pseudoelementos, sin SVG, sin máscaras.
No puedo atribuirme el mérito por esto, lo vi en un sitio web (olvidé el sitio y no puedo encontrarlo nuevamente).
- Es simplemente normal
button
con bordes redondeados y un fondo degradado.
- Se utiliza una
box-shadow
que es inset
para rellenar el interior de blanco.
- Tiene un borde de 2px que en realidad es transparente, por lo que el borde del botón se ve a través.
body {
background: aliceblue;
}
.gradient-border {
border-radius: 24px;
padding: 6px 12px;
background-image: linear-gradient(90deg, red 0%, blue 100%);
/* Fill the inside with white */
background-origin: border-box;
box-shadow: inset 0 100vw white;
/* A transparent border, so the very edge of the button shows through */
border: 2px solid transparent;
}
<button class="gradient-border">Hello</button>