- emojis = ['🙌', '🎉', '💅', '😅', '💖', '👾', '🦜', '🍒', '🚀']

.grid
  - emojis.each do |emoji|
    .cell
      .text= emoji
      .blur= emoji
View Compiled
body {
  display: grid;
  place-content: center;
  height: 100vh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  
  .cell {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px 0 rgba(#000, 0.1);
    
    .text {
      font-size: 50px;
      position: relative;
      z-index: 1;
    }

    .blur {
      font-size: 150px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      filter: blur(20px) opacity(0.4);
    }
  }
}
View Compiled
// Inspired from https://twitter.com/pacocoursey/status/1302028626724974592

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.