Add a CSS Lens Flare to Pictures for a Shiny Contact

I’m a giant fan of films by J.J. Abrams. I get pleasure from their tight plots, quippy dialog, and naturally: anamorphic lens flares. Filmmakers like Abrams use lens flare so as to add a touch of ‘do-it-yourself’ realism to their motion pictures, a method we are able to simply recreate in instruments like Photoshop, then add to our websites as raster photos.

However what if we needed to use the identical lens flare look with out the usage of picture enhancing instruments? We are able to create a CSS lens flare so as to add a cinematic contact to our gallery photos, background pictures, or person profiles.

There are several types of flares in pictures. The one we’re working with is named artifacts, as they depart behind little blotches of sunshine that take the form of a digital camera’s aperture the place the sunshine enters and displays off the floor of the lens.

Supply: Wikipedia

Right here’s a very good instance of the kind of lens flare we’re going to make, pulled straight from a J.J. Abrams film nonetheless, naturally:

Star Trek (2009)

There are a couple of elements to the lens flare above. Let’s record them out so we all know what we’re aiming for:

The middle gentle supply seems as a glowing ball of sunshine.There are some horizontal elliptical gentle streaks — rays of sunshine which might be distorted and blurred, leading to elongated ellipses.Random rays of sunshine shoot off from the middle gentle supply at numerous angles.

We begin with the HTML components under that map to our flare parts. There’s a central gentle supply and two off-diagonal round flares, three horizontal lens flares, and three conical ray-like flares.

<div class=”lens-center”></div>
<div class=”circle-1″></div>
<div class=”circle-2″></div>
<div class=”left-flare horizontal-flare”></div>
<div class=”right-flare horizontal-flare”></div>
<div class=”full-flare horizontal-flare”></div>
<div class=”conic-1″></div>
<div class=”conic-2″></div>
<div class=”conic-3″></div>
</div>

Lastly, to ensure that our lens flare to be believably superimposed on a picture, its middle gentle supply needs to be adjustable. This manner, we are able to place it over a plausible present gentle supply on an image and never overlap with any faces.

The background and lightweight supply of a CSS lens flare

Let’s begin with a black background and central gentle supply for our CSS lens flare. Most gradients on the internet are linear gradients with solid-color transitions, however we are able to apply alpha channels to them which is definitely a pleasant method to produce a glowing impact. A circular-shaped radial gradient with a number of layers of semi-transparent colours provides us a very good digital camera middle impact.

background: radial-gradient(
closest-side circle at middle,
hsl(4 5% 100% / 100%) 0%,
hsl(4 5% 100% / 100%) 15%,
hsl(4 10% 70% / 70%) 30%,
hsl(4 0% 50% / 30%) 55%,
hsl(4 0% 10% / 5%) 75%,
clear 99
);
filter: blur(4px);

Inquisitive about that HSL syntax? It’s new and seems to be the long run course of defining alpha transparency in all CSS colour capabilities.

Discover we’re utilizing a CSS blur filter in there to make the gradients look a bit nearer to layers of subtle gentle.

Now that we all know the right way to add round flares, we may also add a bigger, subtle flare behind the sunshine supply, in addition to three further flares at a 45deg angle from the middle, to present the impact a extra sensible look.

Organising horizontal gentle streaks

Let’s begin with horizontal flares. There are a couple of choices we are able to take, a really elongated ellipse gradient can be the best strategy. Nevertheless, I’ve seen that horizontal lens flares are normally much less symmetrical than those in my reference pictures, so I needed to make mine rather less symmetrical as properly.

Fortunately, radial gradients have an elective location argument in CSS. We are able to create two barely differently-sized left and proper parts of the identical horizontal flare, and with barely totally different colours. We are able to additionally add an opacity filter to make the realm the place the horizontal flares be a part of the middle to make the flare much less jarring.

background: radial-gradient(
closest-side circle at middle,
clear 50%,
hsl(4 10% 70% / 40%) 90%,
clear 100%
);
filter: blur(5px);

Whereas we’re at it, let’s additionally add a single full elongated elliptical backside flare three-quarters of the best way down the viewport for an additional contact of “realism.”

Creating the subtle rays of sunshine

With each the radial and horizontal flares in place, all we have now left are the angled rays of sunshine capturing off from the sunshine supply. We may add further elliptical radial gradients then skew and translate the container to get an in depth approximation. However we even have a CSS gradient that’s already made for the job, the conic gradient. Beneath is an instance that offers us a 7deg conic gradient at a 5deg offset from its container’s bottom-right nook.

background: conic-gradient(
from 5deg at 0% 100%,
clear 0deg,
hsl(4 10% 70% / 30%) 7deg,
clear 15deg
);
transform-origin: backside left;
rework: rotate(-45deg);

We’ll add a couple of conic gradients centered at our flare middle, with numerous gradient angles of semi-transparent colours. As a result of conic gradients can present the nook of its container div, we’ll rotationally rework them utilizing our gentle supply as its origin, leading to an offset subtle ray filter impact.

Utilizing CSS customized properties for a extra versatile lens flare

Thus far, we’ve created a responsive, however statically-positioned, lens flare impact at a hard and fast location. It might be tough to regulate the middle of the lens flare with out additionally breaking the horizontal and conic flares round it.

To make the CSS lens flare each adjustable and fewer brittle, we’ll expose the sunshine supply flare’s place, measurement, and hue through a set of customized properties.

:root {
–hue: 4;
–lens-center-size: 40%;
–lens-spread-size: 80%;
–lens-left: 55%;
–lens-top: 15%;
}

Whereas we’re at it, we’re additionally going to regulate the flare hue and the dimensions of the horizontal flare top. For horizontal flare width, we use CSS variable overloading to make them adjustable on their very own; in any other case, we fall again to the sunshine supply flare middle or the picture middle.

.left-flare {
width: var(–left-flare-width, var(–lens-left, 50%));
}

That is what the finished CSS lens flare impact appears to be like like with a photograph background and the lens flare moved up so the sunshine supply location appears to be like plausible. Go forward, add your individual picture to see the way it works in several contexts!

Different CSS and non-CSS lens flare examples

This is only one method to create a CSS lens flare, in fact. I like this strategy as a result of it’s versatile when it comes to the colour, measurement, and positioning of the flare and its elements. That makes it extra of a reusable part that can be utilized in lots of contexts.

Right here’s one by Keith Grant that makes use of a linear gradient in addition to CSS customized properties. Then it sprinkles some JavaScript in there to randomize the HSLA values.

Nicholas Visitor has one other CSS lens flare that applies a field shadow on the ::earlier than and ::after pseudo-elements of a .flare aspect to get the impact, plus a smidge of jQuery that makes the flare comply with the mouse on hover.

This one is made with Canvas and is neat in how the sunshine supply follows the mouse on hover whereas exhibiting how the lens flare artifacts change place as the sunshine supply place modifications.

The identical kind of concept right here:

And a enjoyable one which makes use of GSAP, Canvas, and a library referred to as JS.LensFlare:

How would you strategy a CSS lens flare impact? Share within the feedback!

Add a CSS Lens Flare to Pictures for a Shiny Contact initially printed on CSS-Tips. You must get the e-newsletter.