Shaders
header.lightDarkMode D
Gallery

Embossed Relief 3

Embossed Relief

A minimalist shader effect featuring a warm, off-white background (#f5f2eb) with subtle paper texture overlay. The composition displays an embossed circular shape with diagonal linear striations or ridges running through it at approximately 45-degree angles. The embossing effect creates a shallow relief with soft shadows and highlights, giving the shape dimensional depth. The light source appears to be dynamically controlled, creating subtle variations in shadow intensity across the embossed surface. The overall effect is very subtle and refined, with low contrast between the embossed element and background. A fine grain texture is applied across the entire surface, simulating natural paper material with slight surface irregularities. The mood is elegant and understated, with a focus on tactile, three-dimensional qualities despite the flat presentation. The circular shape contains approximately 4-5 parallel diagonal lines that create a sense of movement or layering within the form.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Emboss,
  Paper,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#f5f2eb" />
    <Emboss :depth="-0.05" :light-angle="{ axis: 'x', type: 'mouse', curve: 0.4, momentum: 0.15, outputMax: 311, outputMin: 240, smoothing: 0.2 }" :light-intensity="0.2" :shadow-intensity="0.23" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/LxxV4-VS2bDS_sdf.bin" />
    <Paper />
  </Shader>
</template>