OxyProps

OxyProps – The Ultimate Page Builder Companion​

Elevate Your Page Building with OxyProps — the innovative WordPress plugin that integrates a sleek CSS framework, advanced custom elements, and smart context menus.

Why OxyProps is the perfect match for you?

Whether you’re a business owner building your first website or an experienced website developer looking for efficiency and time savings, this page builder plugin has got your back.

A Powerful Color System​

With this page builder plugin, managing your website colors and color schemes is a piece of cake. Select from pre-built color swatches or define your custom ones from the plugin dashboard.

Design your website using this page builder plugin logical colors, also available as global colors, and your design will automatically respond to light & dark, or any color scheme you choose.

No More Typing​

With this page builder plugin, using custom properties is now effortless. You no longer have to worry about syntax or losing time typing the prop name in value fields.

OxyProps’ smart context menu makes relevant props for a specific field available with a simple click.

Light & Dark Versions Simultaneously​

Design light and dark versions of your site simultaneously using OxyProps logical colors.

Your site is light/dark responsive “out of the box,” and this page builder plugin adds a light/dark toggle to your builder UI, so you can easily make sure your design looks good in both versions.

Classes Navigation and Live Preview​

OxyProps improves your builder classes list navigation with keyboard navigation and live preview of the class effect.

If you can’t remember the exact class or are unsure which one to use, OxyProps has got you covered.

Rely on OxyProps Default Settings​

Need to be up and running fast for your new website project? Leverage OxyProps default global settings.

When activated, OxyProps will redefine your builder global settings using OxyProps Custom Properties for every setting, from font stacks through fluid typography to colors and spacing.

You get a fully responsive settings blueprint that you can tweak to your liking.

No More Fighting the Framework​

Say goodbye to hours of styling elements and fighting against the framework defaults built with extreme specificity or even !important rules.

OxyProps is built with zero specificity rules, so you can always easily apply your custom styles at a local level.

Comprehensive Design Options with OxyProps

OxyProps offers a wide range of design properties and utility classes that will enhance your Oxygen website design experience. Below are some of the areas covered by the plugin:

Colors

OxyProps includes Open Color, an open-source color scheme optimized for UI development. You can select pre-built color swatches or define your custom ones, and your design will automatically respond to light and dark modes.

Preview »

Colors Schemes

OxyProps Automatically Adapts to your website visitor Light or Dark preference.

Enjoy our schemes switcher.

Preview »

Layouts

Our layout props and classes will help you design your preferred layout in no time, and most of them are built to be naturally responsive.

Preview »

Gradients

OxyProps Gradients can be used as background or text gradients.

You can combine them with noise and filters for enhanced visual effects.

Preview »

Shadows

A selection of Inner and outer box shadows of several strengths to bring depth to your designs, and they adapt to light and dark modes.

Preview »

Aspect Ratios

Easily give an element the aspect you wish without messing with heights.

Available with or without object-fit: cover.

Preview »

Typography

A helpful set of props to style your texts. You can choose from fluid and static font sizes, leading and tracking, text orientations, and other typography properties.

Preview »

Easing

In addition to the familiar ease, ease-out, ease-in, and ease-in-out timing functions, OxyProps offers extra easings that mimic physics.

Preview »

Animations

Get premade keyframe effects to use as is or combined in your own animations.

OxyProps utility classes allow you to target normal, active, and hover states.

Preview »

Sizes

You can use relative units, and fixed or fluid sizes, with no need for px.

Preview »

Borders

Everything you need to style borders is available, including width, corner radius, round radius, conditional radius, and a selection of blobs.

Preview »

Z-index

Take control over the third dimension with Layers props and classes that bring all the z-index values you could possibly need.

Preview »

Media Queries

OxyProps is currently ahead of the CSS spec, offering named media queries with the @custom-media syntax. This feature is not yet supported by browsers but is ready for the future of CSS.

Preview »

Buttons

OxyProps includes utility classes to convert your Oxygen text links to buttons. You can combine them with color props and animation props for awesome visual effects.

Preview »

Cards

There are two sets of cards utility classes matching your color theme. One uses surfaces and shadows to add depth to your design, and the other creates a glassmorphism effect.

Preview »

Read Documentation

Get OxyProps now