Html Question posted in
Some basic documentation can be found here.

Html – Eggshell gradients in css

enter image description here

What is the best strategy to creating subtle complex gradients like the attached. I tried to see what the css was in this element, but it may be set in the canvas javascript itself.

I am not sure if this is a linear gradient – or made up of multiple gradients stacked on top of each other with differing degrees of opacity.

Its as if there is a spot of indigo top/left and peach in the bottom/left

https://jsfiddle.net/Ls4dr3bo/1/

body{
    background: rgb(229,232,236);
background: linear-gradient(90deg, rgba(229,232,236,1) 0%, rgba(229,232,236,1) 35%, rgba(231,217,219,1) 74%, rgba(231,221,224,1) 100%);
}


.container{
  height: 100vh;
  width:100%;
}
<div class="container">

</div>

possible html and css used in reference

https://www.exo.inc/iris

jsx

'use client';

import gsap from 'gsap';
import { useLayoutEffect, useRef } from 'react';

import { Section } from '~/components/ui';
import { cx } from '~/utils';

import styles from './ExoIrisGradientTransition.module.scss';

export const ExoIrisGradientTransition = () => {
  const containerRef = useRef(null);

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      if (!containerRef.current) return;
      gsap.to('.js__solid', {
        opacity: 1,
        scrollTrigger: {
          trigger: '.js__gradientContainer',
          start: '80% bottom',
          end: 'bottom bottom',
          // markers: true,
          scrub: true,
        },
      });
    }, containerRef);

    return () => {
      ctx.revert();
    };
  }, []);

  return (
    <Section className={styles.container} ref={containerRef}>
      <div className={cx(styles.gradientContainer, 'js__gradientContainer')}>
        <div className={cx(styles.gradient, 'js__gradient')} aria-hidden />
        <div className={cx(styles.solid, 'js__solid')} aria-hidden />
      </div>
    </Section>
  );
};

css

.container {
  position: relative;
  display: flex;
  background: transparent;
  flex-flow: column nowrap;
  z-index: 5;
}

.gradientContainer {
  --container-height: 160vh;
  height: var(--container-height);
  position: relative;
  width: 100%;

  @include landscape {
    --container-height: 200vh;
  }
}

.gradient {
  width: 100%;
  height: var(--container-height);
  background: linear-gradient(
    180deg,
    rgba(236, 194, 111, 0.5) 0%,
    rgba(110, 153, 234, 1) 65%,
    rgba(8, 11, 27, 1) 100%
  );

  @include landscape {
    background: linear-gradient(
      140deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(236, 194, 111, 1) 33%,
      rgba(110, 153, 234, 1) 66%,
      rgba(8, 11, 27, 1) 100%
    );
  }
}

.solid {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: var(--container-height);
  background: $color-dark-dark-blue;
  opacity: 0;
}
Tags:

2

Answers


  1. 0

    You can try with your colors in the background, it is built using simple CSS with filter and backdrop-filter, please edit this code in your own file because the width of the result on this page is small.

    .grad-sec{
  display:inline-block;
  width:100vw;
  height:100vh;
  position:relative;
  z-index:0;
}
.blue,.yellow,.red{
  position:absolute;
  width:300px;
  height:300px;
  background:blue;
  top:20px;
  left:20px;
  border-radius:100%;
  filter:blur(200px);
  opacity: 0.2;
}
.yellow {
    background: yellow;
    top: 290px;
    left: 230px;
}
.red {
    background: red;
    bottom: 70%;
    right: 20px;
    left: auto;
    top: auto;
}
.grad-sec::before {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  backdrop-filter: blur(200px);
  -webkit-backdrop-filter: blur(100px);
  background-color: rgba(255, 255, 255, 0.75);
}
    <div class="grad-sec">
  <div class="blue"></div>
  <div class="yellow"></div>
  <div class="red"></div>
</div>
    Login or Signup to reply.
  2. 0

    It looks like 3 ellipses with some filter, but radial-gradient look close enough. (Run the code snippet in full page mode for better result)

    body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #e5e8ec;
  background-image: radial-gradient(circle closest-corner at 100% 40%, #ff00000a 100%, transparent 150%), radial-gradient(circle closest-corner at 20% 15%, #0000ff0a 40%, transparent 100%), radial-gradient(circle closest-corner at 25% 80%, #ffdd000a 40%, transparent 100%);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search