Skip to content
Shadows, animations, patterns etc.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Visual Effects Circle CI MIT licensed

This Origami component provides CSS visual effects via a set of Sass variables and mixins.



When using the build service or importing the module with silent mode set to false, o-visual-effects provides helper classes to access the different levels of box shadow settings. The main class available is: .o-visual-effects-shadow which outputs a low shadow. To access any other level of shadow, you should use the modifier for that level, for example: .o-visual-effects-shadow--high.

<div class="box o-visual-effects-shadow--high">Box content</div>


As with all Origami components, o-visual-effects has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-visual-effects-is-silent : false; in your Sass before you import the o-visual-effects Sass.

$o-visual-effects-is-silent: false;
@import 'o-visual-effects/main';

Shadows mixin

The oVisualEffectsShadowsElevation mixin is used to add a consistent shadow to your element. There are 4 levels of shadow available: ultralow, low (default), mid, and high.


.my-element {
	@include oVisualEffectsShadowsElevation('mid');


	box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);

Transition variables

When adding transitions to elements in CSS, you should use o-visual-effects variables for consistent timings for slide, expand, and fade effects.


.transition--slide {
	transition: all 0.5s $o-visual-effects-transition-slide;

.transition--expand {
	transition: all 0.5s $o-visual-effects-transition-expand;

.transition--fade {
	transition: all 0.5s $o-visual-effects-transition-fade;


.transition--slide {
	transition: all 0.5s cubic-bezier(1, 0, 0.5, 1.275);

.transition--expand {
	transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

.transition--fade {
	transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

Migration Guide

Migrating from v1 to v2

The following changes have been made to the mixins in o-visual-effects:

  • oEffectsBackgroundsPinStripe removed.
  • oEffectsShadowsElevation renamed to oVisualEffectsShadowsElevation.


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


This software is published by the Financial Times under the MIT licence.

You can’t perform that action at this time.