Background Gradient Colors

Apply gradient backgrounds with linear, radial and other patterns.

Usage:

@bg gradient-*;
@bg gradient-linear-*;
@bg gradient-radial-*;
@bg gradient-conic-*;

danger

Gradient color uses background-image property.

So, if you are using @bg img-*; then conflict will be created. You need to choose a stratagey to work with both.

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    bg: {
      gradient: {
        DEFAULT: {
          property: "background-image: <v><i>;",
          values: {},
        },

        linear: {
          property: "background-image: linear-gradient(<v>)<i>;",
          values: {},
        },

        radial: {
          property: "background-image: radial-gradient(<v>)<i>;",
          values: {},
        },

        conic: {
          property: "background-image: conic-gradient(<v>)<i>;",
          values: {},
        },
      },
    },
  },
};

export default shilpConfig;