Shader Atlas
한국어
◯ Shapes

Rounded Rect

둥근 사각형

A rectangle with adjustable width, height, and corner rounding.

Also known as: RoundedRectRounded rectangleRounded box

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, RoundedRect } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <RoundedRect />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, RoundedRect } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <RoundedRect/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, RoundedRect } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <RoundedRect />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, RoundedRect } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <RoundedRect />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'RoundedRect',
    }
  ]
}, { disableTelemetry: true })

Props · RoundedRect

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
originOriginSet in codecenter—Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
colorColor#ffffff—Fill color of the rectangle
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the rectangle
widthWidth0.350.01 – 1 (step 0.01)Half-width of the rectangle
heightHeight0.250.01 – 1 (step 0.01)Half-height of the rectangle
roundingRounding0.050 – 0.5 (step 0.01)Corner rounding radius — set to min(width, height) for a pill shape
rotationRotation00 – 360 (step 1)Rotation in degrees
softnessSoftness00 – 0.1 (step 0.001)Edge softness for antialiasing
strokeThicknessStroke Thickness00 – 0.2 (step 0.005)Stroke thickness. Zero means no stroke.
strokeColorStroke Color#000000—Color of the stroke outline
strokePositionStroke Positioncenteroutside · center · insidePosition of the stroke relative to the shape edge
colorSpaceColor Blendinglinearlinear · oklch · oklab · hsl · hsv · lchColor space for blending fill and stroke colors

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Ellipse타원

Create an oval by adjusting its horizontal and vertical radii independently.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Parallelogram평행사변형

A parallelogram with adjustable width, height, and top-edge skew.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Trapezoid사다리꼴

A trapezoid with independently adjustable top and bottom widths.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Circle원

Draw a filled circle with adjustable size and edge softness.

A rounded rectangle draws a panel with softened corners, like a card or input field. Increasing the rounding takes it from a box toward a capsule-shaped button.

`width` and `height` are half-sizes, not full dimensions, and each ranges from 0.01 to 1. `rounding` is the corner radius from 0 to 0.5; setting it to the smaller of `width` and `height` makes a pill shape. `rotation` turns the shape from 0 to 360 degrees.

Remember that `width` and `height` are half-sizes, or the panel may be larger than expected. Use it as a card base, then add a small `strokeThickness` or a `Line` for an outline or divider.

When to use

Use it for card, input-field, and capsule-button backgrounds. Avoid it when you need a slanted edge or different top and bottom widths; choose Parallelogram or Trapezoid instead.

Open as page ↗