CSS: Vintage Polaroid Look

0-css-vintage-polaroid.md

CSS: Vintage Polaroid Look

Late one night having fun with css and voila!

Demo (Work in Progress)'

https://my-lolll-valentine.web.app/

Resource

• CSS Text Gradient Color Generator CSSportal.com

• CSS Gradient Background Generator CSSgradient.io

• Font: Permmanent Marker Google Font

style.css

body { background-color: rgb(232, 232, 232); }

.card {
    /* Vintage poloroid effect */
    filter: drop-shadow(0 0 7px #00000067);
    box-shadow: inset 0 0 30px #00a1f829;
    background: linear-gradient(16deg, 
      rgba(173,79,32,0.28) 0%,
      rgba(249,221,95,0.12) 8%,
      rgba(246,135,9,0.11) 53%,
      rgba(249,177,95,0.160) 94%);
}

.card-img {
    aspect-ratio: 4/3;
    margin-bottom: 17px;
    /* Vintage poloroid effect */
    filter: sepia(37%) brightness(87%) contrast(113%);
}

.card > h3 { font-family: 'Permanent Marker', cursive;
    background: #020314;
    background: linear-gradient(to top, #020314 0%, #05152E 50%, #3B0400 100%, #001A61 94%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}