Pure CSS Sparkle Effect

Are you looking to add a touch of sparkle to your website? Look no further! This code provides a pure CSS sparkle effect that will surely catch your visitors’ attention. The code consists of SVG elements and CSS animations to create the sparkling effect. By applying the provided CSS classes to your SVG elements, you can make them sparkle with a mesmerizing animation.

You can easily customize the size and position of the sparkles by adjusting the CSS properties. Enhance your website’s visual appeal and make it shine with this delightful sparkle effect!

How to Create Pure CSS Sparkle Effect

1. Create the HTML structure for the sparkle effect as follows:

<svg id="one" width="100" height="100" viewBox="0 0 100 100">
  <g id="copy-1" class="group">
    <g class="large">
      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45,41.25 L75,42.5 L45,43.75 L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z" fill="white" />
    </g>
    <g class="large-2" transform="rotate(45)">
      <use xlink:href="#large" />
    </g>
    <g class="small">
      <path id="small" d="M41.25,40 L42.5,25 L43.75,40 L45,41.25 L60,42.5 L45,43.75 L43.75,45 L42.5,60 L41.25,45 L40,43.75 L25,42.5 L40,41.25z" fill="white" />
    </g>
  </g>
</svg>

<svg id="two" width="40" height="40" viewBox="0 0 100 100">
  <use xlink:href="#copy-1" />
</svg>

<svg id="three" width="70" height="70" viewBox="0 0 100 100">
  <use xlink:href="#copy-1" />
</svg>

2. Use the following CSS styles to design and animate sparkle elements.

body{
   background: #000;
   min-height: 450px;
   position: relative;
}
svg#one {
	position: absolute;
	-webkit-transform: translate(50%, 141%);
	transform: translate(50%, 141%);
}
svg#two {
	position: absolute;
	-webkit-transform: translate(570%, 1210%);
	transform: translate(570%, 1210%);
}
svg#three {
	position: absolute;
	-webkit-transform: translate(600%, 250%);
	transform: translate(600%, 250%);
}
.group {
    -webkit-transform: translate(42.5px,42.5px);
    -moz-transform: translate(42.5px,42.5px);
    transform: translate(42.5px, 42.5px);
}
path {
    -webkit-transform: translate(-42.50px,-42.50px);
    -moz-transform: translate(-42.50px,-42.50px);
    transform: translate(-42.50px,-42.50px);
}
.large {
	-webkit-animation: large 2.5s infinite;
	-moz-animation: large 2.5s infinite;
}
.large-2 {
	-webkit-animation: large-2 2.5s infinite;
	-moz-animation: large-2 2.5s infinite;
}
.small {
	-webkit-animation: small 2.5s infinite;
	-moz-animation: small 2.5s infinite;
}
@-webkit-keyframes large {
	0% {
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0);
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(360deg) scale(1.5);
		transform: rotate(360deg) scale(1.5);
	}
}
@-moz-keyframes large {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(360deg) scale(1.5);
	}
}
@-webkit-keyframes large-2 {
	0% {
		opacity: 0;
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(405deg) scale(1.1);
		transform: rotate(405deg) scale(1.1);
	}
}
@-moz-keyframes large-2 {
	0% {
		opacity: 0;
		transform: rotate(45deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(405deg) scale(1.1);
	}
}
@-webkit-keyframes small {
	0% {
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0);
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(-360deg) scale(1);
		transform: rotate(-360deg) scale(1.5);
	}
}
@-moz-keyframes small {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(-360deg) scale(1.5);
	}
}

That’s all! hopefully, you have successfully created a sparkle animation using pure CSS. If you have any questions or suggestions, feel free to comment below.