How to apply Wix Custom CSS code to Third party CSS code/ element e.g.: /* CSS HEX */ /* CSS HSL */ /* SCSS Gradient */

Ask the community
,
1

I am trying to use a third-party custom CSS code to manipulate my site design look and field.

the global.CSS will be my first option.

what is the correct element or selector that need to be apply in other to enable the Custom CSS to work?

just to be clear these third-party custom code (CSS HEX) (SCSS Gradient) (SCSS HSL) are they compatible with Wix coding System? I tried few times to assign the CSS code, but it didn’t work.

Any helpful tips or trick!!!

2

You can use CSS inside a CUSTOM-ELEMENT or HTML-COMPONENT for example.

3

what is Wix Custom element? are we referring to something like this: CSS.HEX CSS.HSL
SCSS.Gradient I just want to know your approach or Wix.

4

Show me your HTML/CSS/JS-CODE you want to implement

5

i am sending screenshot of the after-effect of the site. if the code were to be apply successfully.
below is the third party Custom code: not a Style.CSS

/* CSS HEX */
–amaranth-pink: #f49cbbff;
–light-cyan: #cbeef3ff;
–ou-crimson: #880d1eff;
–rusty-red: #dd2d4aff;
–bright-pink-crayola: #f26a8dff;

/* CSS HSL */
–amaranth-pink: hsla(339, 80%, 78%, 1);
–light-cyan: hsla(187, 62%, 87%, 1);
–ou-crimson: hsla(352, 83%, 29%, 1);
–rusty-red: hsla(350, 72%, 52%, 1);
–bright-pink-crayola: hsla(345, 84%, 68%, 1);

/* SCSS HEX */
$amaranth-pink: #f49cbbff;
$light-cyan: #cbeef3ff;
$ou-crimson: #880d1eff;
$rusty-red: #dd2d4aff;
$bright-pink-crayola: #f26a8dff;

/* SCSS HSL */
$amaranth-pink: hsla(339, 80%, 78%, 1);
$light-cyan: hsla(187, 62%, 87%, 1);
$ou-crimson: hsla(352, 83%, 29%, 1);
$rusty-red: hsla(350, 72%, 52%, 1);
$bright-pink-crayola: hsla(345, 84%, 68%, 1);

/* SCSS RGB */
$amaranth-pink: rgba(244, 156, 187, 1);
$light-cyan: rgba(203, 238, 243, 1);
$ou-crimson: rgba(136, 13, 30, 1);
$rusty-red: rgba(221, 45, 74, 1);
$bright-pink-crayola: rgba(242, 106, 141, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);
$gradient-right: linear-gradient(90deg, #f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);
$gradient-bottom: linear-gradient(180deg, #f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);
$gradient-left: linear-gradient(270deg, #f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);
$gradient-top-right: linear-gradient(45deg, #f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);
$gradient-bottom-right: linear-gradient(135deg, #f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);
$gradient-top-left: linear-gradient(225deg, #f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);
$gradient-bottom-left: linear-gradient(315deg, #f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);
$gradient-radial: radial-gradient(#f49cbbff, #cbeef3ff, #880d1eff, #dd2d4aff, #f26a8dff);The after-effect Screenshot.

6
  1. Add a HTML-Component onto your page.
  2. Add the following code into your Component and save it.
  3. Test it.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* SCSS HEX */
    :root {
      --hex-amaranth-pink: #f49cbbff;
      --hex-light-cyan: #cbeef3ff;
      --hex-ou-crimson: #880d1eff;
      --hex-rusty-red: #dd2d4aff;
      --hex-bright-pink-crayola: #f26a8dff;
    }

    /* SCSS HSL */
    :root {
      --hsl-amaranth-pink: hsla(339, 80%, 78%, 1);
      --hsl-light-cyan: hsla(187, 62%, 87%, 1);
      --hsl-ou-crimson: hsla(352, 83%, 29%, 1);
      --hsl-rusty-red: hsla(350, 72%, 52%, 1);
      --hsl-bright-pink-crayola: hsla(345, 84%, 68%, 1);
    }

    /* SCSS RGB */
    :root {
      --rgb-amaranth-pink: rgba(244, 156, 187, 1);
      --rgb-light-cyan: rgba(203, 238, 243, 1);
      --rgb-ou-crimson: rgba(136, 13, 30, 1);
      --rgb-rusty-red: rgba(221, 45, 74, 1);
      --rgb-bright-pink-crayola: rgba(242, 106, 141, 1);
    }

    /* SCSS Gradient */
    :root {
      --gradient-top: linear-gradient(0deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-right: linear-gradient(90deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-bottom: linear-gradient(180deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-left: linear-gradient(270deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-top-right: linear-gradient(45deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-bottom-right: linear-gradient(135deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-top-left: linear-gradient(225deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-bottom-left: linear-gradient(315deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-radial: radial-gradient(var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
    }

    /* Apply the gradient variable to a container */
    .gradient-container {
      padding: 20px;
      text-align: center;
      background: var(--gradient-top); /* You can change this to any gradient variable */
      border-radius: 8px;
      color: white;
    }

    h1 {
      margin: 0;
    }
  </style>
  <title>Color Gradient Example</title>
</head>
<body>
  <div class="gradient-container">
    <h1>Color Gradient Example</h1>
  </div>
</body>
</html>