Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
.hero { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7)), url("hero.jpg") center/cover no-repeat; color: white; } .card-img { position: relative; } .card-img::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(0,0,0,0.6)); }
Result
Open