Skip to content

Instantly share code, notes, and snippets.

@amitkeret
Created December 8, 2019 04:54
Show Gist options
  • Save amitkeret/07395a5d0de433ac7ba5253c374a14a8 to your computer and use it in GitHub Desktop.
Save amitkeret/07395a5d0de433ac7ba5253c374a14a8 to your computer and use it in GitHub Desktop.
CSS block element blurred background
.wrapper.card1
.title Quia voluptas voluptatem sit
.text Ea eius cum dolor facere sequi. Veritatis architecto fugiat rerum maxime. Cupiditate facere explicabo corrupti. Aliquid voluptas vel sequi fugiat adipisci sit ut
.wrapper.card2
.title Sint eveniet repellendus fuga
.text Eveniet animi neque ipsum nihil rerum laboriosam. Quod fugiat quis inventore laudantium qui doloremque. Ea et autem sed
body
padding 1rem
card()
border 2px solid grey
box-shadow 0 1rem 1rem 1rem #DDD
border-radius .25rem
padding 1.5rem
color white
margin-bottom 3rem
text-align center
.wrapper
card()
.title
font-size 2rem
margin-bottom 1.5rem
background(imgurl)
position relative
overflow hidden
&::before
content ''
z-index -1
position absolute
width 100%
height 100%
left 0
top 0
background-image url(imgurl)
background-size cover
background-position center center
filter blur(.5rem)
transform scale(1.2)
.card1
background("https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1055&q=80")
.card2
background("https://images.unsplash.com/photo-1445962125599-30f582ac21f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment