<div class="gradient-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. </p>
</div>
.gradient-box {
display: flex;
align-items: center;
//width: 50vw;
width: 90%;
margin: auto;
max-width: 22em;
position: relative;
padding: 30% 2em;
box-sizing: border-box;
$border: 5px;
color: #FFF;
background: #000;
background-clip: padding-box; /* !importanté */
border: solid $border transparent; /* !importanté */
border-radius: 1em;
&:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
margin: -$border; /* !importanté */
border-radius: inherit; /* !importanté */
background: linear-gradient(to right, red, orange);
}
}
html { height: 100%; background: #000; display: flex; }
body { margin: auto; }
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.