While I was experimenting with SpriteKit fire particles in Xcode, I thought of how easy it would be to create something similar in CSS using mix-blend-mode. For this to perform as best as possible, I used orange-to-transparent radial gradients for each particle instead of blurring solid orange ones. Slightly blurring the non-moving parent div didn’t really cause a problem though.
A Pen by Jon Kantner on CodePen.
| - var parts = 50; | |
| .fire | |
| - while (parts--) { | |
| .particle | |
| - } |
| $fireColor: rgb(255,80,0); | |
| $fireColorT: rgba(255,80,0,0); | |
| $dur: 1s; | |
| $blur: 0.03em; | |
| $fireRad: 3em; | |
| $parts: 50; | |
| $partSize: 5em; | |
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: rgb(48,8,8); | |
| } | |
| .fire { | |
| font-size: 24px; | |
| filter: blur($blur); | |
| -webkit-filter: blur($blur); | |
| margin: 3em auto 0 auto; | |
| position: relative; | |
| width: 10em; | |
| height: 12em; | |
| } | |
| .particle { | |
| animation: rise $dur ease-in infinite; | |
| background-image: radial-gradient($fireColor 20%,$fireColorT 70%); | |
| border-radius: 50%; | |
| mix-blend-mode: screen; | |
| opacity: 0; | |
| position: absolute; | |
| bottom: 0; | |
| width: $partSize; | |
| height: $partSize; | |
| // spread particles out in time and x-position to get desired effect | |
| @for $p from 1 through $parts { | |
| &:nth-of-type(#{$p}) { | |
| animation-delay: $dur * random(); | |
| left: calc((100% - #{$partSize}) * #{($p - 1)/$parts}); | |
| } | |
| } | |
| } | |
| @keyframes rise { | |
| from { | |
| opacity: 0; | |
| transform: translateY(0) scale(1); | |
| } | |
| 25% { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| transform: translateY(-10em) scale(0); | |
| } | |
| } |