https://github.com/maximeij/luminosity-css

💡 Duo of customizable CSS classes to define a light source location and cast dynamic shadows off elements based on their relative position. Themable and customizable with CSS variables
https://github.com/maximeij/luminosity-css

css light shadow web

Last synced: 3 days ago
JSON representation

💡 Duo of customizable CSS classes to define a light source location and cast dynamic shadows off elements based on their relative position. Themable and customizable with CSS variables

• Host: GitHub
• URL: https://github.com/maximeij/luminosity-css
• Owner: MaximeIJ
• License: apache-2.0
• Created: 2023-06-20T18:47:38.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-24T21:46:36.000Z (over 2 years ago)
• Last Synced: 2025-08-30T14:39:40.955Z (10 months ago)
• Topics: css, light, shadow, web
• Language: CSS
• Homepage: https://maximeij.dev/luminosity-css/
• Size: 19.5 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 💡 luminosity.css



  



This repository provides two themable and customizable CSS classes that can add dynamic lighting to your web page. Try out the [demo](https://maximeij.dev/luminosity-css)!

1. `light-effect` is applied to any element you want casting a shadow. It will use css variables you define to calculate the proper directly and size for the shadow given your element's position relative to the light source.

2. `light-source` is applied to the container and will add a gradient based layer to lighten content close to the source and dark content that is further. Note it's not needed for `light-effect` to work and serves to double down on the luminosity effect.

## Usage

### Basic

- Copy [luminosity.css](luminosity.css) into your project.

  - Modify it if you need to, otherwise apply its classes `.light-effect` and `.light-source` as needed.

- Supply required CSS variables if you don't want default.

  - This is particularly important for element position `--lc-x` and `--lc-y`.

  - See [luminosity.css](luminosity.css) for a description of each variable.

- Take a look at the [demo](index.html) for a working example to get started.

### Theming

You can control the colors of both the ambient light source and the element shadows to fine tune to your site's pallet:

- `--lc-light-on` and `--lc-light-off` can be used to customize the color of the filter applied at both ends of the `.light-effect` container gradient.

  - Use color `opacity` to control the intensity of the ambient light filter.

  - Combine custom colors with `--lc-light-z` and `--lc-light-m` to tighten or loosen the beam of light.

  - Remember: `.light-effect` is not needed for directional shadows to work.

- `--lc-shadow-color` can be used to define the color of the shadows cast by the elements with `.light-effect`. You can pass a custom value to adapt to a given pallet your site is working with and control the `opacity`.

### Customizing

You can control the position of the ambient light source as well as attributes to customize the tightness of the beam and the elongation factor of shadows:

- The ambient source light's position can be modified in 4 ways:

  - `--lc-light-x` and `--lc-light-y` can be used to set the 2d coordinates of the center of the light in `%`. These values can be negative or otherwise outside the bounds of the container to give the light a faraway effect.

  - `--lc-light-z` simulates the height of the light source and indirectly the spread of the beam and blurriness of element shadows. It's best kept positive.

  - `--lc-light-m` is a measure of the extent of the light source's filters (both light and dark). It affects the range of the effect in the `.light-source` gradient but not the shadows of the elements.

- `--lc-x` and `--lc-y` **must** be used on elements for directional shadows to work and should be expressed in % and correspond to the center of the element. They can be set at runtime by javascript for elements that are naturally positioned.

- `--lc-shadow-sensitivity` determines the number of `px` the shadow is offset by for each `%` distance the element is from the light source. By default it's set at `0.05px`.