Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System SolutionAdd a CSS Lens Flare to Images for a Vivid Contact | CSS-Tips

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System SolutionAdd a CSS Lens Flare to Images for a Vivid Contact | CSS-Tips

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System Answer

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 splash of ‘selfmade’ realism to their motion pictures, a way we will simply recreate in instruments like Photoshop, then add to our websites as raster pictures.

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

There are several types of flares in pictures. The one we’re working with is called artifacts, as they go away 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.

A diagram showing how light enters a camera lens at various angles to create a flare.
Supply: Wikipedia

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

An example of the CSS lens flare we are making, showing a flare to the right of an actor in a still from the 2009 Star Trek movie
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:

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

We begin with the HTML parts beneath that map to our flare elements. 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>

Lastly, to ensure that our lens flare to be believably superimposed on a picture, its middle gentle supply needs to be adjustable. This fashion, we will 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 will apply alpha channels to them which is definitely a pleasant technique to produce a glowing impact. A circular-shaped radial gradient with a number of layers of semi-transparent colours offers us an excellent 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);

Interested in that HSL syntax? It’s new and seems to be the long run route of defining alpha transparency in all CSS coloration features.

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 tips on how to add round flares, we may also add a bigger, subtle flare behind the sunshine supply, in addition to three extra flares at a 45deg angle from the middle, to provide the impact a extra real looking look.

Establishing horizontal gentle streaks

Let’s begin with horizontal flares. There are a couple of choices we will take, a really elongated ellipse gradient can be the only method. Nonetheless, I’ve observed that horizontal lens flares are often much less symmetrical than those in my reference images, so I wished to make mine rather less symmetrical as properly.

Fortunately, radial gradients have an optionally available 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 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 way in which 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’ve left are the angled rays of sunshine capturing off from the sunshine supply. We may add extra 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. Under is an instance that provides 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

Up to now, we’ve created a responsive, however statically-positioned, lens flare impact at a set location. It will 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 by way of 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 scale of the horizontal flare peak. 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 seems to be like with a photograph background and the lens flare moved up so the sunshine supply location seems to be plausible. Go forward, add your individual photograph to see the way it works in several contexts!

Different CSS and non-CSS lens flare examples

This is only one technique to create a CSS lens flare, after all. I like this method as a result of it’s versatile by way of 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 ingredient 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 displaying how the lens flare artifacts change place as the sunshine supply place adjustments.

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 method a CSS lens flare impact? Share within the feedback!

Supply hyperlink

Leave a Reply