Add a CSS Lens Flare to Photos for a Bright Touch

JJ Abrams电影的忠实影迷一定对影片中精巧的剧情、妙语连珠的对话，以及标志性的变形镜头光晕印象深刻。 Filmmakers such as Abrams cleverly use lens flares to add a touch of "handmade" realism to the film. This trick is easily copied in tools like Photoshop and then added to our website as a raster image.

但如果我们想在无需使用图像编辑工具的情况下实现同样的镜头光晕效果呢？ We can create a CSS lens flare that adds a cinematic texture to our gallery images, background photos, or user avatars.

There are different types of lens flares in photography. What we are dealing with is a phenomenon called artifacts that leave small spots where light enters and reflects from the lens surface, shaped like the camera's aperture.

Here is an excellent example of the lens flare we are about to make, and naturally, it is taken directly from stills from the JJ Abrams movie:

The lens flare above contains several parts. Let's list them so we know what we are aiming for:

1. The central light source appears as a luminous ball of light.
2. There are some horizontal elliptical rays—the distorted and blurred light that form an elongated elliptical shape.
3. Random light emits from the central light source at different angles.

Let's start with the HTML element below that corresponds to the Halo component. There is a central light source and two circular halos that deviate from the diagonal, three horizontal lens flares and three conical ray-like halos.

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Finally, in order for our lens flare to be truly superimposed on the image, its central light source must be adjustable. This way we can place it on a trusted existing light source on the picture without overlapping with any faces.

Background and light source for CSS lens flare

Let's start with the black background and center light source of the CSS lens flare. Most gradients on the network are linear gradients with solid color transitions, but we can apply alpha channels to them, which is actually a good way to produce a luminous effect. The circular radial gradient with multiple layers of translucent colors gives us a good camera center effect.

 background: radial-gradient(
  closest-side circle at center,
  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%,
  transparent 99%
);
filter: blur(4px);

Curious about HSL syntax? It is new and seems to be the future direction that defines alpha transparency in all CSS color functions.

Note that we are using CSS blur filter here to make the gradient look more like a scattered light layer.

Now that we know how to add a circular halo, we will also add a larger, diffuse halo behind the light source, along with three additional halos at a 45-degree angle in the center to make the effect look more realistic.

Set horizontal light stripes

Let's start with a horizontal halo. We can take some options and a very slender elliptical gradient would be the easiest way to do it. However, I noticed that horizontal lens flares are usually not as symmetric as in my reference photos, so I wish my lens flares were a little asymmetrical, too.

Fortunately, the radial gradient has an optional positional parameter in CSS. We can create two left and right half with slightly different sizes of the same horizontal halo and use slightly different colors. We can also add an opacity filter to make the area where the horizontal halo connects to the center look less abrupt.

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

By the way, let's also add a full, slender oval base halo three-quarters below the viewport to add another "reality".

Create diffuse rays

With radial halo and horizontal halo, all that remains is the sloping light emitted from the light source. We can add an extra elliptical radial gradient and then tilt and translate the container to get an approximation.但我们还有一个已经为这项工作准备好的CSS渐变，即锥形渐变。 Here is an example that gives us a 7-degree tapered gradient that is offset by 5 degrees from the lower right corner of its container.

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

We will add some tapered gradients centered around the center of our halo with gradient angles in various translucent colors. Because the tapered gradient can show the angle of its container div, we will rotate it using our light source as its origin, resulting in an offset diffused light filter effect.

Create more flexible lens flares with CSS custom properties

So far, we have created a responsive but statically positioned lens flare effect that is in a fixed position. It is difficult to adjust the center of the lens flare without destroying the surrounding horizontal and conical halos.

To make the CSS lens flare both adjustable and less fragile, we will expose the position, size, and hue of the light source flare through a set of custom properties.

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

By the way, we will also adjust the halo tone and the horizontal halo height. For horizontal halo width, we use CSS variable reload to make it adjustable individually; otherwise, we will fall back to the light source halo center or image center.

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

This is the CSS lens flare effect done using the photo background and the upward moving lens flare to make the light source position look credible. Go ahead and add your own photos to see how it works in different environments!

Other CSS and non-CSS lens flare examples

Of course, this is just one way to create a CSS lens flare. I like this approach because it is flexible in the color, size and position of the halo and its parts. This makes it more like a reusable component that can be used in many environments.

Keith Grant has an example of using linear gradients as well as custom properties for CSS. Then it adds some JavaScript there to randomize the HSLA values.

Nicholas Guest also has a CSS lens flare, which applies a box shadow on the ::before and ::after pseudo-elements of the .flare element to get the effect, plus a little jQuery to make the halo follow the mouse when hovering.

This is made with Canvas, which cleverly shows how the light source follows the mouse when hovering, while showing how the lens flare artifact changes position as the light source position changes.

The same idea here:

There is also an interesting example, which uses GSAP, Canvas, and a library called JS.LensFlare:

How will you handle CSS lens flare effects? Share your thoughts in the comments!

The above is the detailed content of Add a CSS Lens Flare to Photos for a Bright Touch. For more information, please follow other related articles on the PHP Chinese website!